NoRedInk/noredink-ui/18.2.0

NOTE: the latest version is 35.9.3

Nri.Ui.Select.V8

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

Changes from V7

- view adds a label
- adds standard custom, nriDescription, etc. attributes
- switches to a list-based attribute API from a record-based API
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

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

Default behavior.

Disables the input

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.

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
containerCss : List Style -> Attribute value

Adds CSS to the element containing the input.

noMargin : Bool -> Attribute value

Remove default spacing from the Input.