Skip to main content

Material-UI Controls options

Multiple choices controls​

Autocomplete​

caution

<Autocomplete /> options prop is handled by Material-UI. This documentation doesn't apply for that component.
Check Material-UI documentation.

options prop​

options is expected to be an array containing items defined below :

String​

the key and the value will share the same string value provided.

<RadioGroup name="demo" options={['foo', 'bar', 'baz']} />

Will produce :

<input name="demo" type="radio" value="foo"> foo
<input name="demo" type="radio" value="bar"> bar
<input name="demo" type="radio" value="baz"> baz

Labelled option​

Labelled options are defined as object. They can set their value, their label and some props to forward to the control.

Propertytypedescription
labelnodeAny React node such as string
valuestringThe value of the option
propsobjectForwarded to the rendered form control
<CheckboxGroup name="demo" options={[
  { label: 'Displayed label', value: 'actual-value' },
  { label: <strong>I am bold</strong>, value: '123'},
  { label: 'I am disabled', value: 'abc', props: { disabled: true } },
]} />

Will produce :

<input name="demo" type="checkbox" value="actual-value"> Displayed label
<input name="demo" type="checkbox" value="123"> <strong>I am bold</strong>
<input name="demo" type="checkbox" value="abc" disabled=""> I am disabled

Group​

A group has a label, holds other options and cannot be selected.

info

Groups are only supported by <Select />.
Groups cannot be nested.

Propertytypedescription
groupstringForwarded to <optgroup>'s label prop or <ListSubheader />'s children
depending on native value
optionsmixedMix of strings and labelled options
propsobjectForwarded to <optgroup> or <ListSubheader />
depending on native value
<Select name="demo" options={[
  'first',
  { group: 'My group', options: ['foo', { label: 'bar', value: 'Bar!' }] },
  'not-part-of-any-group',
  { group: 'Primary group', options: ['first', 'second'], props: { color: 'primary' } },
]} />