/

<SelectInput> Component

A dropdown select box input, nice and accessible.

Share
Code Editor
<SelectInput

  label='Options'

  options={[

    { label: 'Option One', name: 1 },

    { label: 'Option Two', name: 2 },

    { label: 'Option Three', name: 3 }

  ]}

/>

Where it's used

Latest:5.1.0
Search with

Releases

Latest:5.1.0
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...
5.x.x
Loading 5.x.x releases...

Props

NameDescription
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:

Share
Code Editor
<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":

Share
Code Editor
<SelectInput

  label='Options'

  size='small'

  options={[

    { label: 'Option One', name: 1 },

    { label: 'Option Two', name: 2 },

    { label: 'Option Three', name: 3 }

  ]}

/>