This component will be removed soon.

Replaced by Form.Control

InputSelect

Basic usage

Show editable code example

Any Paragon component or export may be added to the code example.

<InputSelect
  name="fruits"
  label="Fruits"
  value="strawberry"
  options={[
    'apple',
    'orange',
    'strawberry',
    'banana',
  ]}
/>

<InputSelect
  name="fruits"
  label="Fruits"
  value="strawberry"
  options={[
    'apple',
    'orange',
    'strawberry',
    'banana',
  ]}
/>

Separate labels and values

Show editable code example

Any Paragon component or export may be added to the code example.

<InputSelect
  name="new-england-states"
  label="New England States"
  value="RI"
  options={[
    { label: 'Connecticut', value: 'CN' },
    { label: 'Maine', value: 'ME' },
    { label: 'Massachusetts', value: 'MA' },
    { label: 'New Hampshire', value: 'NH' },
    { label: 'Rhode Island', value: 'RI' },
    { label: 'Vermont', value: 'VT' },
  ]}
/>

<InputSelect
  name="new-england-states"
  label="New England States"
  value="RI"
  options={[
    { label: 'Connecticut', value: 'CN' },
    { label: 'Maine', value: 'ME' },
    { label: 'Massachusetts', value: 'MA' },
    { label: 'New Hampshire', value: 'NH' },
    { label: 'Rhode Island', value: 'RI' },
    { label: 'Vermont', value: 'VT' },
  ]}
/>

Separate option groups

Show editable code example

Any Paragon component or export may be added to the code example.

<InputSelect
  name="northeast-states"
  label="Northeast States"
  value="MD"
  options={[
    {
      label: 'New England States',
      options: [
        { label: 'Connecticut', value: 'CN' },
        { label: 'Maine', value: 'ME' },
        { label: 'Massachusetts', value: 'MA' },
        { label: 'New Hampshire', value: 'NH' },
        { label: 'Rhode Island', value: 'RI' },
        { label: 'Vermont', value: 'VT' },
      ],
    },
    {
      label: 'Mid Atlantic States',
      options: [
        { label: 'Delaware', value: 'DE' },
        { label: 'Maryland', value: 'MD' },
        { label: 'New Jersey', value: 'NJ' },
        { label: 'New York', value: 'NY' },
        { label: 'Pennsylvania', value: 'PA' },
        { label: 'Virginia', value: 'VA' },
        { label: 'Washington, DC', value: 'DC' },
        { label: 'West Virginia', value: 'WV' },
      ],
    },
  ]}
/>

<InputSelect
  name="northeast-states"
  label="Northeast States"
  value="MD"
  options={[
    {
      label: 'New England States',
      options: [
        { label: 'Connecticut', value: 'CN' },
        { label: 'Maine', value: 'ME' },
        { label: 'Massachusetts', value: 'MA' },
        { label: 'New Hampshire', value: 'NH' },
        { label: 'Rhode Island', value: 'RI' },
        { label: 'Vermont', value: 'VT' },
      ],
    },
    {
      label: 'Mid Atlantic States',
      options: [
        { label: 'Delaware', value: 'DE' },
        { label: 'Maryland', value: 'MD' },
        { label: 'New Jersey', value: 'NJ' },
        { label: 'New York', value: 'NY' },
        { label: 'Pennsylvania', value: 'PA' },
        { label: 'Virginia', value: 'VA' },
        { label: 'Washington, DC', value: 'DC' },
        { label: 'West Virginia', value: 'WV' },
      ],
    },
  ]}
/>

With validation

Show editable code example

Any Paragon component or export may be added to the code example.

<InputSelect
  name="color"
  label="Favorite Color"
  options={['', 'red', 'orange', 'yellow', 'green', 'blue', 'purple']}
  validator={value => {
    let feedback = { isValid: true };
    if (!value) {
      feedback = {
        isValid: false,
        validationMessage: 'Please make a selection.',
      };
    }
    return feedback;
  }}
/>

<InputSelect
  name="color"
  label="Favorite Color"
  options={['', 'red', 'orange', 'yellow', 'green', 'blue', 'purple']}
  validator={value => {
    let feedback = { isValid: true };
    if (!value) {
      feedback = {
        isValid: false,
        validationMessage: 'Please make a selection.',
      };
    }
    return feedback;
  }}
/>

Disabled usage

Show editable code example

Any Paragon component or export may be added to the code example.

<InputSelect
  name="fruits"
  label="Fruits"
  aria-label="Fruits"
  value="strawberry"
  options={[
    'apple',
    'orange',
    'strawberry',
    'banana',
  ]}
  disabled
/>

<InputSelect
  name="fruits"
  label="Fruits"
  aria-label="Fruits"
  value="strawberry"
  options={[
    'apple',
    'orange',
    'strawberry',
    'banana',
  ]}
  disabled
/>

With disabled option

Show editable code example

Any Paragon component or export may be added to the code example.

<InputSelect
  name="fruits"
  label="Fruits"
  value="strawberry"
  options={[
    { label: 'apple', value: 'apple' },
    { label: 'orange', value: 'orange', disabled: true },
    { label: 'banana', value: 'banana', disabled: true },
  ]}
/>

<InputSelect
  name="fruits"
  label="Fruits"
  value="strawberry"
  options={[
    { label: 'apple', value: 'apple' },
    { label: 'orange', value: 'orange', disabled: true },
    { label: 'banana', value: 'banana', disabled: true },
  ]}
/>

Usage Insights#

InputSelect

	Project Name	Paragon Version	Instance Count
	edx-platform	2.6.4	4
	frontend-app-support-tools	21.13.1	4

Edit this page Leave feedback

Paragon Design System

Theme

InputSelect

Basic usage

Separate labels and values

Separate option groups

With validation

Disabled usage

With disabled option

Usage Insights#

InputSelect

All components (A-Z)

Theme

InputSelect

Basic usage#

Separate labels and values#

Separate option groups#

With validation#

Disabled usage#

With disabled option#

Usage Insights#

InputSelect

All components (A-Z)

Basic usage

Separate labels and values

Separate option groups

With validation

Disabled usage

With disabled option