import { SelectInput } from '@uhg-abyss/mobile';

label

hintText

isDisabled

isRequired

helpContent

() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInput
        model="select-input-sandbox"
        label="Menu"
        options={[
          {
            title: 'Title 1',
            items: [
              { label: 'item 1', value: 'item11', isDisabled: false },
              { label: 'item 2', value: 'item12', isDisabled: true },
              { label: 'item 3', value: 'item13', isDisabled: false },
            ],
          },
          {
            title: 'Title 2',
            items: [
              { label: 'item 1', value: 'item21', isDisabled: false },
              { label: 'item 2', value: 'item22', isDisabled: false },
              { label: 'item 3', value: 'item23', isDisabled: false },
            ],
          },
        ]}
      />
    </FormProvider>
  );
};

Usage

Use the options prop to supply the options that can be selected. options is an array of objects, where each object should have two properties:

• label, a string which is how the option will be displayed in the list
• value, a string which is the unique identifier for the option

Sections can also be specified, in which case the section object should have title and items properties instead of label and value (See Titles for more details).

options = {
  [
    { label: 'Item 1', value: 'item1' },
    { label: 'Item 2', value: 'item2', isDisabled: true },
    { label: 'Item 3', value: 'item3' },
    { label: 'Item 4', value: 'item4' },
    { label: 'Item 5', value: 'item5' },
  ]
}

useForm (recommended)

Use the useForm hook to manage the state of the select input. The model prop should be set to a unique string that identifies the form field.

useState

Using the useState hook gets values from the component state.

Titles

To create sections in the list, pass objects into the options array that have the title and items properties. title specifies the name of the title, which will be bolded and not selectable, items should contain the options within that section (with the same label/value format as normal).

Label

Use the label prop to display a label above the input menu.

Required

Use the isRequired prop to display an asterisk next to the label.

Hint Text

Use the hintText prop to display text below the label.

Help Content

Use the helpContent prop to display a help icon in the top right of the container, which will display the provided content in a modal screen when pressed.

Messages

Use the errorMessage and successMessage props to display a custom error or success message below the menu.

Disabled

Set the isDisabled prop to true to disable the select list input field so users cannot select a value.

Disable Option Items

Disable an individual option item by setting the isDisabled key to true within the object.

SelectInput Props

Prop Name	Type	Default	Description
errorMessage	string	-	Error message to be displayed below the select input field
helpButtonAccessibilityLabel	string	-	Set the accessibility label for the help button
helpContent	string | ReactNode	-	When defined, displays a help icon that can be tapped to view the provided content in a modal screen
hintText	string	-	Set the subtext displayed below the Label
isDisabled	boolean	-	Flag to enable/disable the select list. If true, the select list will be disabled
isRequired	boolean	-	Requires a user to make a selection. If true, the asterisk will be displayed next to the label
label	string	-	Select list label
modalTitle	string	-	Title of the input modal
onChange	function	-	Callback fired every time the selection value changes
options	object[]	-	List of options selectable in the select list input. { label: string, value: string }
placeholder	string	-	The rendered string when no option is selected
successMessage	string	-	Success message to be displayed below the select input field
value	string	-	Option value selected in the select list input

SelectInput Classes

Extends Abyss - Modal Classes

Class Name	Description	States
abyss-input-help-icon	Help icon element
abyss-input-help-modal-close-button	Help modal close button
abyss-input-help-modal-footer	Help modal footer
abyss-input-message-icon	Message icon
abyss-input-message-text	Message text
abyss-select-input-close-icon	Close icon
abyss-select-input-container	Selection container
abyss-select-input-header	Header element
abyss-select-input-help-button	Help button
abyss-select-input-hint-text	Input hint text
abyss-select-input-label	Label element
abyss-select-input-menu-container	Menu container
abyss-select-input-menu-item	Menu item element	disabled, selected
abyss-select-input-menu-item-container	Menu item container
abyss-select-input-menu-item-text	Menu item text	disabled, selected
abyss-select-input-menu-list	Menu list
abyss-select-input-menu-list-title	Menu title
abyss-select-input-message	Message element
abyss-select-input-modal	Menu modal
abyss-select-input-open-icon	Menu open icon
abyss-select-input-root	Root element
abyss-select-input-text	Text element
abyss-select-input-text-container	Text container

SelectInput Translations

Translation Key	Value
help	Help
close	Close
error	Error
success	Success
SelectInput.placeholder	Select an Option

Search tokens

SelectInput Tokens

Token Name	Value
input-header.color.text.label	#4B4D4F
input-header.color.text.hint	#4B4D4F
input-header.color.icon.help.rest	#196ECF
input-header.color.icon.help.active	#004BA0
input-message.color.text.error	#990000
input-message.color.text.success	#007000
input-message.color.icon.error	#990000
input-message.color.icon.success	#007000
input-field.color.surface.default	#FFFFFF
input-field.color.surface.disabled	#F3F3F3
input-field.color.text.input	#4B4D4F
input-field.color.border.rest.default	#4B4D4F
input-field.color.border.rest.error	#990000
input-field.color.border.rest.success	#007000
input-field.color.border.active.default	#196ECF
input-field.color.border.active.error	#990000
input-field.color.border.active.success	#007000
input-field.color.icon.utility.rest	#4B4D4F
input-field.color.icon.utility.disabled	#929496
input-field.color.icon.utility.active	#323334
input-field.border-radius.all.container	4
input-field.border-width.all.container.rest	1
input-field.border-width.all.container.active	3
input-header.sizing.all.icon.help	24
input-message.sizing.all.icon.leading	20
input-field.sizing.icon.all.utility	20
input-field.sizing.icon.all.picker	20
input-container.spacing.gap.vertical.container	8
input-header.spacing.gap.horizontal.container	12
input-header.spacing.gap.horizontal.label	4
input-header.spacing.gap.vertical.content	4
input-message.spacing.gap.horizontal.container	4
input-field.spacing.padding.all.field	12
input-field.spacing.gap.horizontal.field	12
input-field.spacing.gap.horizontal.input-indicator	2
input-field.spacing.gap.horizontal.prefix-input	2
input-field.box-shadow.container.active	Shadow Color: $core.color.brand.60 Shadow Offset: Width: 0 Height: 0 Shadow Opacity: 1 Shadow Radius: 4
input-field.box-shadow.container.error	Shadow Color: $core.color.red.120 Shadow Offset: Width: 0 Height: 0 Shadow Opacity: 1 Shadow Radius: 4
input-field.box-shadow.container.success	Shadow Color: $core.color.green.100 Shadow Offset: Width: 0 Height: 0 Shadow Opacity: 1 Shadow Radius: 4