Select

Overview

Selects are used to allow users to select one item from a list. Selects are used in forms for users to submit data. Only one selection from the list is allowed.

Select is a commonly used type of input that prevelant in forms, where a user is submitting data and chooses one option from a list. This component is great when there are too many options (to a degree) or the option labels are too long or too similar. The options are exposed by the user clicking on the select.

When to use

• Can be used in forms on a full page and in modals. While the select and dropdown components look similar, they have different functions.
• Use the select component inside a form where users are selecting from a list of options and submitting data.
• Use the dropdown component to filter or sort content on a page.
• Another important difference between the two components is the underlying code. The select component’s appearance will be determined by the browser being used, while the dropdown component can be styled as needed.

When not to use

• Do not use a select if there are only two options to choose from. In this case, use a radio instead.
• Do not use a select if there are multiple options to select. In this case, use a checkbox group instead. Do not nest selects or use them to display overly complex information. Keep option selections as straight forward as possible.
• Do not use as a menu/navigation.
• Do not use to filter.

Design Notes

Native dropdown is used for selecting, this helps us meet accessibility requirements and enables the component to be used across devices. The placeholder should show as a default value in the list e.g. ‘Select Value’ Focus should appear around the controller and not the label unless the input is contained. There is no disabled state for selects, please represent read-only values using an alternative method.

Interactive demo

The demo below allows you to preview the component. You can play with its props, variations, configuration options and dive into its events and even see them trigger in the event log tab.

MedKit Select

Label (optional)

OneTwo

Props Help

For each property in a component you can see:

• value-type
  that it supports
• The default
  value
• If the prop is
  required

Error

string

Array<string>

Errors to display for the input.

Value 

Help Text

string

Array<string>

The help text to display for the input.

Value 

Label

string

Required

The label to be shown above the input.

 

Label Hidden

boolean

false

Only display the label for screen readers.

Toggle Prop

Error Hidden

boolean

false

Only display the red border but not the error text.

Toggle Prop

Options

Array<SelectionOption>

export interface SelectionOption {
  value: string | number;
  label: string;
}

Required

The list of options that the user can select from.

Value 

Label 

Value 

Label 

Placeholder

string

The placeholder for the unselected value.

 

Required

boolean

false

If the field is required

Toggle Prop

Default

I am a select (optional)

OneTwoThree

Help Text & Error

Help Text

I am a select (optional)

OneTwoThree

Enter some text to answer the thing

Error

I am a select (optional)

OneTwoThree

It's a trap

Figma Library

You can find the component in our MedKit Figma library.