This component will be removed soon.

Replaced by Input and ValidationFormGroup

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	20.26.0	4

Paragon Design System

Theme

PlaygroundBeta

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

PlaygroundBeta

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