HTML5 Controls options

Multiple choices controls

• <Select />
• <CheckboxGroup />
• <RadioGroup />

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']} />

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.

Property	type	description
label	node	Any React node such as string
value	string	The value of the option
props	object	Forwarded 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 } },
]} />

Displayed label

I am bold

I am disabled

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 />.
In HTML5, <optgroup> cannot be nested.

Property	type	description
group	string	Forwarded to <optgroup>'s label prop
options	mixed	Mix of strings and labelled options
props	object	Forwarded to <optgroup>

<Select name="demo" options={[
  'first',
  { group: 'My group', options: ['foo', { label: 'bar', value: 'Bar!' }] },
  'not-part-of-any-group',
  { group: 'Disabled group', options: ['first', 'second'], props: { disabled: true } },
]} />

firstfoobarnot-part-of-any-groupfirstsecond

Will produce :

<select name="demo">
  <option value="first">first</option>

  <optgroup label="My group">
    <option value="foo">foo</option>
    <option value="bar">Bar!</option>
  </optgroup>

  <option value="not-part-of-any-group">not-part-of-any-group</option>

  <optgroup label="Disabled group" disabled="">
    <option value="first">first</option>
    <option value="second">second</option>
  </optgroup>
</select>