Select Input

Allows a user to choose from a pre-defined list.

Examples

Basic Select Input

The SelectInput uses the browser's built-in <select> element under the hood to provide the best UX on mobile. Available in two sizes.

Label

Required

PlaceholderOption AOption BOption C

Label

Required

PlaceholderOption AOption BOption C

import { SelectInput } from '@curology/ui-components-web/react/SelectInput';
import { SelectOption } from '@curology/ui-components-web/react/SelectInput/SelectOption';

<SelectInput 
  required
  label="Label"
  placeholder="Placeholder"
  id="default-input"
  size="{sm|md(default)}" 
>
  <SelectOption value="a">Option A</SelectOption>
  <SelectOption value="b">Option B</SelectOption>
  <SelectOption value="c">Option C</SelectOption>
</SelectInput>

With Helper Text

More context, like an error message, can be provided via the helperText prop.

Label

PlaceholderOption AOption BOption C

Helper Text

Label

PlaceholderOption AOption BOption C

Helper Text

import { SelectInput } from '@curology/ui-components-web/react/SelectInput';
import { SelectOption } from '@curology/ui-components-web/react/SelectInput/SelectOption';

<SelectInput 
  ... 
  helperText="Helper Text" 
>
  ...
</SelectInput>

Critical, Warning, Success, and Disabled States

There are four additional states the SelectInput can be in, to indicate danger, warning, success or the inability to be controlled.

Label

Option AOption BOption C

Some kind of error

Label

Option AOption BOption C

Some kind of error

Label

Option AOption BOption C

Some kind of warning

Label

Option AOption BOption C

Some kind of warning

Label

Option AOption BOption C

Some kind of success

Label

Option AOption BOption C

Some kind of success

Label

Option AOption BOption C

No touching!

Label

Option AOption BOption C

No touching!

import { SelectInput } from '@curology/ui-components-web/react/SelectInput';
import { SelectOption } from '@curology/ui-components-web/react/SelectInput/SelectOption';

<SelectInput 
  ...
  state="{critical|warning|success}"
  disabled
>
  ...
</SelectInput>

With Icon

An optional leading icon can be provided.

Label

With an icon as a stringOption AOption BOption C

Label

With an icon as a stringOption AOption BOption C

Label

With an icon componentOption AOption BOption C

Label

With an icon componentOption AOption BOption C

Label

With an icon (disabled)Option AOption BOption C

Label

With an icon (disabled)Option AOption BOption C

import { SelectInput } from '@curology/ui-components-web/react/SelectInput';
import { SelectOption } from '@curology/ui-components-web/react/SelectInput/SelectOption';

<SelectInput ... icon={<PlaceholderIcon />}>
  ...
</SelectInput>

Loading

When the loading prop is provided, the content of the SelectInput will be hidden, replaced by a spinning loader. The input will no longer be active. This is useful when loading the values of the select asynchronously.

Label

Required

Label

Required

import { SelectInput } from '@curology/ui-components-web/react/SelectInput';
import { SelectOption } from '@curology/ui-components-web/react/SelectInput/SelectOption';

<SelectInput 
  ...
  loading
>
  ...
</SelectInput>

Controlled Select Input

Like all form inputs, a SelectInput can either be uncontrolled, or controlled (by providing a value and onChange listener).

Label

Required

PlaceholderOption AOption BOption C

Label

Required

PlaceholderOption AOption BOption C

import { SelectInput } from '@curology/ui-components-web/react/SelectInput';
import { SelectOption } from '@curology/ui-components-web/react/SelectInput/SelectOption';

<SelectInput 
  ...
  value={someValue}
  onChange={(evt, value) => ...}
>
  ...
</SelectInput>

Props

SelectInputProps

Name	Type	Default Value	Required	Description
All attributes of a <input />
fieldClassName	string		No	A className to apply to the field.
fieldProps	Record<string, unknown>		No	Any props to spread onto the field container.
helperText	ReactNode		No	A string or component to display as helper text beneath the input
highlight	ReactNode		No	Highlighted helper text to display at the bottom of the multiline text input
highlightClassName	string		No	A className to apply to the highlight.
icon	ComponentClass<any, any> | FunctionComponent<any> | ReactElement<any, string | JSXElementConstructor<any>> | ForwardRefExoticComponent<any>		No	An icon to render at the front of the input.
label	ReactNode		No	A string or component to display as a label above the input
loading	false | true	false	No	Should the input display a loading state? Useful when options are being loaded via a remote request.
onChange	FormControlChangeEventHandler		No	Emit a new value when the input's selected value changes.
placeholder	string		No	Text to display when there is no selected value.
required	false | true	false	No	Is the field required?
size	"md" | "sm"	'md'	No	The size of the field
state	"" | "critical" | "warning" | "success"	''	No	The state of the field

SelectOptionProps

Name	Type	Default Value	Required	Description
All attributes of a <option />