`<SelectInput>` Component

A dropdown select box input, nice and accessible.

<SelectInput
  label='Options'
  options={[
    { label: 'Option One', name: 1 },
    { label: 'Option Two', name: 2 },
    { label: 'Option Three', name: 3 }
  ]}
/>

<SelectInput
  label='Options'
  options={[
    { label: 'Option One', name: 1 },
    { label: 'Option Two', name: 2 },
    { label: 'Option Three', name: 3 }
  ]}
/>

Where it's used

Latest:4.0.3

Search with

Releases

Latest:4.0.3

registry.npmjs.org

0.x.x

Loading 0.x.x releases...

1.x.x

Loading 1.x.x releases...

2.x.x

Loading 2.x.x releases...

3.x.x

Loading 3.x.x releases...

4.x.x

Loading 4.x.x releases...

Props

Name	Description
`name` string	input name attribute
`label` string	text to display above the input
`defaultLabel` string	text to act as placeholder label
`size` string	Controls font size and size of the element Options: `"small"`, `"medium"`
`value` object	set the value via prop Object contains nested props, see below:
`value.name` string	programmatic name of the option
`value.label` string	visual, human-readable name of the option
`options*` array	array of option objects within the select Array members must be of the type below:
`options[x]` object	Object contains nested props, see below:
`options[x].name` string
`options[x].label` string
`onValueChange` function	function called with the value when it

Examples

With many options:

<SelectInput
  options={[
    {
      name: '1',
      label: 'One'
    },
    {
      name: '2',
      label: 'Two'
    },
    {
      name: '3',
      label: 'Three'
    },
    {
      name: '4',
      label: 'Four'
    },
    {
      name: '5',
      label: 'Five'
    },
    {
      name: '6',
      label: 'Six'
    },
    {
      name: '7',
      label: 'Seven'
    },
    {
      name: '8',
      label: 'Eight'
    },
    {
      name: '9',
      label: 'Nine'
    },
    {
      name: '10',
      label: 'Ten'
    },
    {
      name: '11',
      label: 'Eleven'
    },
    {
      name: '12',
      label: 'Twelve'
    },
    {
      name: '13',
      label: 'Thirteen'
    },
    {
      name: '14',
      label: 'Fourteen'
    },
    {
      name: '15',
      label: 'Fifteen'
    },
    {
      name: '16',
      label: 'Sixteen'
    },
    {
      name: '17',
      label: 'Seventeen'
    },
    {
      name: '18',
      label: 'Eighteen'
    }
  ]}
/>

<SelectInput
  options={[
    {
      name: '1',
      label: 'One'
    },
    {
      name: '2',
      label: 'Two'
    },
    {
      name: '3',
      label: 'Three'
    },
    {
      name: '4',
      label: 'Four'
    },
    {
      name: '5',
      label: 'Five'
    },
    {
      name: '6',
      label: 'Six'
    },
    {
      name: '7',
      label: 'Seven'
    },
    {
      name: '8',
      label: 'Eight'
    },
    {
      name: '9',
      label: 'Nine'
    },
    {
      name: '10',
      label: 'Ten'
    },
    {
      name: '11',
      label: 'Eleven'
    },
    {
      name: '12',
      label: 'Twelve'
    },
    {
      name: '13',
      label: 'Thirteen'
    },
    {
      name: '14',
      label: 'Fourteen'
    },
    {
      name: '15',
      label: 'Fifteen'
    },
    {
      name: '16',
      label: 'Sixteen'
    },
    {
      name: '17',
      label: 'Seventeen'
    },
    {
      name: '18',
      label: 'Eighteen'
    }
  ]}
/>

With size="small":

<SelectInput
  label='Options'
  size='small'
  options={[
    { label: 'Option One', name: 1 },
    { label: 'Option Two', name: 2 },
    { label: 'Option Three', name: 3 }
  ]}
/>

<SelectInput
  label='Options'
  size='small'
  options={[
    { label: 'Option One', name: 1 },
    { label: 'Option Two', name: 2 },
    { label: 'Option Three', name: 3 }
  ]}
/>

`<SelectInput>` Component

Code Editor

Where it's used

Releases

Props

Examples

Code Editor

Code Editor

<SelectInput> Component

Code Editor

Where it's used

Releases

Props

Examples

Code Editor

Code Editor

`<SelectInput>` Component