Nri.Ui.Select.V9

Build a select input with a label, optional guidance, and error messaging.

Changes from V8

- The option `value` attribute is no longer prefixed with `nri-select-`;
  This is not a breaking change to the API, but affects automated tests
  that are looking for this prefix.
- adds `icon` support

view : String -> List (Attribute a) -> Html a

generateId : String -> String

Pass in the label to generate the default DOM element id used by a Select.view with the given label.

Input types

type alias Choice value =

{ label : String

, value : value

}

A single possible choice.

choices : (value -> String) -> List (Choice value) -> Attribute value

type alias ChoicesGroup value =

{ label : String

, choices : List (Choice value)

}

Groupings of choices (will be added after isolated choices.)

groupedChoices : (value -> String) -> List (ChoicesGroup value) -> Attribute value

Input content

value : Maybe value -> Attribute value

Attributes

type Attribute value

Customizations for the Select.

defaultDisplayText : String -> Attribute value

hiddenLabel : Attribute value

Hides the visible label. (There will still be an invisible label for screen readers.)

visibleLabel : Attribute value

Default behavior.

disabled : Attribute value

Disables the input

loading : Attribute value

Use this while the form the input is a part of is being submitted.

errorIf : Bool -> Attribute value

Sets whether or not the field will be highlighted as having a validation error.

If you have an error message to display, use errorMessage instead.

errorMessage : Maybe String -> Attribute value

If Just, the field will be highlighted as having a validation error, and the given error message will be shown.

guidance : String -> Attribute value

A guidance message shows below the input, unless an error message is showing instead.

guidanceHtml : List (Html Never) -> Attribute value

A guidance message (HTML) shows below the input, unless an error message is showing instead.

custom : List (Attribute Never) -> Attribute value

Use this helper to add custom attributes.

Do NOT use this helper to add css styles, as they may not be applied the way you want/expect if underlying styles change. Instead, please use the css helper.

nriDescription : String -> Attribute value

id : String -> Attribute value

Set a custom ID for this text input and label. If you don't set this, we'll automatically generate one from the label you pass in, but this can cause problems if you have more than one text input with the same label on the page. Use this to be more specific and avoid issues with duplicate IDs!

testId : String -> Attribute value

icon : Svg -> Attribute msg

Add an SVG icon that will render on top of the select by way of absolute positioning.

containerCss : List Style -> Attribute value

Adds CSS to the element containing the input.

noMargin : Bool -> Attribute value

Remove default spacing from the Input.

batch : List (Attribute value) -> Attribute value

Combine several attributes into one. A nice way to do nothing via batch []

NoRedInk/noredink-ui/24.4.0

Nri.Ui.Select.V9

Changes from V8

Input types

Input content

Attributes

Modules