Nri.Ui.SelectElement.V2

A select component powered by a custom HTML element <select-element>.

This component allows for a dropdown selection with optional grouping. The underlying custom element handles popover behavior, keyboard navigation, and accessibility.

view : String -> List (Attribute value msg) -> Html msg

Renders the SelectElement component. The defaultTriggerText is used as the content of the trigger button if no selectedValue provides a label, or if no label attribute is set.

type Attribute value msg

= Attribute (Config value msg -> Config value msg)

An attribute for configuring the SelectElement component.

You can use attributes to set options, handle selection, customize appearance, and more.

SelectElement.view "Choose a planet"
    [ SelectElement.optionItems myOptions
    , SelectElement.selectedValue (Just Earth)
    , SelectElement.onSelect SelectPlanet
    , SelectElement.label "Planets"
    , SelectElement.disabled False
    ]

type OptionItem value msg

= Item (SingleOption value msg)

| Group String (List (SingleOption value msg))

Represents an item in the select dropdown.

You can use Item for a single option, or Group to group related options under a label.

SelectElement.Item
    { content = Html.Styled.text "Earth"
    , triggerLabel = "Earth"
    , value = Earth
    }


SelectElement.Group "Gas Giants"
    [ { content = Html.Styled.text "Jupiter"
      , triggerLabel = "Jupiter"
      , value = Jupiter
      }
    , { content = Html.Styled.text "Saturn"
      , triggerLabel = "Saturn"
      , value = Saturn
      }
    ]

type alias SingleOption value msg =

{ content : Html msg

, value : value

, triggerLabel : String

}

Changes from V1:

- Implemented Elm-first styling
- Removed global CSS dependencies
- Used InputLabelInternal for label rendering
- Used InputErrorAndGuidanceInternal for error and guidance rendering
- Added scroll indicators

Represents a single selectable option.

content: The HTML to display in the dropdown.
triggerLabel: The plain text label to show in the trigger button when selected.
value: The value associated with this option.

Example:

{ content = Html.Styled.text "Earth"
, triggerLabel = "Earth"
, value = Earth
}

optionItems : List (OptionItem value msg) -> Attribute value msg

Defines the list of options and option groups to display in the select dropdown.

selectedValue : Maybe value -> Attribute value msg

Sets the currently selected value.

onSelect : (value -> msg) -> Attribute value msg

The message to send when an option is selected. It receives the newly selected value.

title : String -> Attribute value msg

An optional title to display above the select component.

triggerId : String -> Attribute value msg

The HTML ID for the trigger button. This ID is used by the select-element to associate with its trigger. Defaults to "select-element-trigger-default".

popoverId : String -> Attribute value msg

The HTML ID for the select-element popover. Defaults to "select-element-popover-default".

label : String -> Attribute value msg

Sets the accessible label for the select trigger. This is important for screen readers. Use hideLabel to control visual display.

hideLabel : Bool -> Attribute value msg

If True, the label provided via the label attribute will be visually hidden (but still available to assistive technologies). Defaults to False.

disabled : Bool -> Attribute value msg

Disables the select component, preventing interaction.

loading : Bool -> Attribute value msg

Puts the select component in a loading state. This disables interaction and changes the visual appearance.

icon : Svg -> Attribute value msg

Adds an SVG icon to the trigger button. The icon will be placed before the text.

disableWhen : (value -> Bool) -> Attribute value msg

A predicate function to determine if an individual option should be disabled. Disabled options are not selectable and visually distinct.

error : String -> Attribute value msg

Sets an error message to be displayed below the component. If set, it overrides any guidance message.

guidance : String -> Attribute value msg

Sets a guidance message to be displayed below the component. This message is not shown if an error message is present.

containerCss : List Style -> Attribute value msg

Custom CSS styles for the main container div wrapping the component.

noMargin : Bool -> Attribute value msg

If True, removes the default top margin from the component container.

valueToString : (value -> String) -> Attribute value msg

A function to convert your custom value type to a String. This is necessary for setting data-value attributes on options and for generating unique option IDs.

stringToValue : (String -> Maybe value) -> Attribute value msg

A function to convert a String (from the select-change event detail) back to your custom value type.

customHtmlAttributesForTrigger : List (Attribute msg) -> Attribute value msg

Add custom HTML attributes to the trigger button.

customHtmlAttributesForPopover : List (Attribute msg) -> Attribute value msg

Add custom HTML attributes to the select-element (popover).

NoRedInk/noredink-ui/35.7.0

Nri.Ui.SelectElement.V2

Modules