Build a select input with a label, optional guidance, and error messaging.
Patch changes:
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
- when disabled, the select element is now replaced by a div element with
`aria-disabled="true"` and `tabindex="0"`. This change prevents user
interactions while maintaining the element in the tab order.
- sets cursor to `not-allowed` when disabled`
view : String -> List (Attribute a) -> Accessibility.Styled.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.
{ label : String, value : value }
A single possible choice.
choices : (value -> String) -> List (Choice value) -> Attribute value
{ label : String
, choices : List (Choice value)
}
Groupings of choices (will be added after isolated choices.)
groupedChoices : (value -> String) -> List (ChoicesGroup value) -> Attribute value
value : Maybe value -> 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 : Basics.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 (Accessibility.Styled.Html Basics.Never) -> Attribute value
A guidance message (HTML) shows below the input, unless an error message is showing instead.
custom : List (Accessibility.Styled.Attribute Basics.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 : Nri.Ui.Svg.V1.Svg -> Attribute msg
Add an SVG icon that will render on top of the select by way of absolute positioning.
containerCss : List Css.Style -> Attribute value
Adds CSS to the element containing the input.
noMargin : Basics.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 []