Skip to content
Home

ArraySelection

Info
Demos
Properties
Events

Description

Field.ArraySelection is a component for selecting between a fixed set of options using a dropdown, checkboxes or similar, that will produce a value in the form of an array containing the values of selected options.

There is a corresponding Field.ArraySelection component.

Demos

Checkbox variant (default)

Empty

Code Editor
<Field.ArraySelection

  onFocus={(value) => console.log('onFocus', value)}

  onBlur={(value) => console.log('onBlur', value)}

  onChange={(value) => console.log('onChange', value)}

>

  <Field.Option value="foo" title="Fooo!" />

  <Field.Option value="bar" title="Baar!" />

  <Field.Option value="baz" title="Bazz!" />

  <Field.Option value="qux" title="Quxx!" />

</Field.ArraySelection>

Label

Code Editor
<Field.ArraySelection

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

>

  <Field.Option value="foo" title="Fooo!" />

  <Field.Option value="bar" title="Baar!" />

  <Field.Option value="baz" title="Bazz!" />

  <Field.Option value="qux" title="Quxx!" />

</Field.ArraySelection>

Option selected

Code Editor
<Field.ArraySelection

  value={['bar']}

  onChange={(values) => console.log('onChange', values)}

>

  <Field.Option value="foo" title="Foo!" />

  <Field.Option value="bar" title="Baar!" />

  <Field.Option value="baz" title="Bazz!" />

  <Field.Option value="qux" title="Quxx!" />

</Field.ArraySelection>

Horizontal layout

Code Editor
<Field.ArraySelection

  label="Label text"

  value={['bar']}

  layout="horizontal"

  onChange={(values) => console.log('onChange', values)}

>

  <Field.Option value="foo" title="Foo!" />

  <Field.Option value="bar" title="Baar!" />

  <Field.Option value="baz" title="Bazz!" />

  <Field.Option value="qux" title="Quxx!" />

</Field.ArraySelection>

Horizontal options-layout

Code Editor
<Field.ArraySelection

  label="Label text"

  value={['bar']}

  optionsLayout="horizontal"

  onChange={(values) => console.log('onChange', values)}

>

  <Field.Option value="foo" title="Foo!" />

  <Field.Option value="bar" title="Baar!" />

  <Field.Option value="baz" title="Bazz!" />

  <Field.Option value="qux" title="Quxx!" />

</Field.ArraySelection>

Horizontal layout and horizontal options-layout

Code Editor
<Field.ArraySelection

  label="Label text"

  value={['bar']}

  layout="horizontal"

  optionsLayout="horizontal"

  onChange={(values) => console.log('onChange', values)}

>

  <Field.Option value="foo" title="Foo!" />

  <Field.Option value="bar" title="Baar!" />

  <Field.Option value="baz" title="Bazz!" />

  <Field.Option value="qux" title="Quxx!" />

</Field.ArraySelection>

Disabled

Code Editor
<Field.ArraySelection

  value={['bar']}

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  disabled

>

  <Field.Option value="foo" title="Foo!" />

  <Field.Option value="bar" title="Baar!" />

  <Field.Option value="baz" title="Bazz!" />

  <Field.Option value="qux" title="Quxx!" />

</Field.ArraySelection>

Info

FYI
Code Editor
<Field.ArraySelection

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  info={new FormError('FYI')}

>

  <Field.Option value="foo" title="Foo!" />

  <Field.Option value="bar" title="Baar!" />

  <Field.Option value="baz" title="Bazz!" />

  <Field.Option value="qux" title="Quxx!" />

</Field.ArraySelection>

Warning

I'm warning you...
Code Editor
<Field.ArraySelection

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  warning={new FormError("I'm warning you...")}

>

  <Field.Option value="foo" title="Foo!" />

  <Field.Option value="bar" title="Baar!" />

  <Field.Option value="baz" title="Bazz!" />

  <Field.Option value="qux" title="Quxx!" />

</Field.ArraySelection>

Error

This is what is wrong...
Code Editor
<Field.ArraySelection

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  error={new FormError('This is what is wrong...')}

>

  <Field.Option value="foo" title="Foo!" />

  <Field.Option value="bar" title="Baar!" />

  <Field.Option value="baz" title="Bazz!" />

  <Field.Option value="qux" title="Quxx!" />

</Field.ArraySelection>

Button variant

Empty

Code Editor
<Field.ArraySelection

  variant="button"

  onChange={(value) => console.log('onChange', value)}

>

  <Field.Option value="foo" title="Fooo!" />

  <Field.Option value="bar" title="Baar!" />

  <Field.Option value="baz" title="Bazz!" />

  <Field.Option value="qux" title="Quxx!" />

</Field.ArraySelection>

Label

Code Editor
<Field.ArraySelection

  variant="button"

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

>

  <Field.Option value="foo" title="Fooo!" />

  <Field.Option value="bar" title="Baar!" />

  <Field.Option value="baz" title="Bazz!" />

  <Field.Option value="qux" title="Quxx!" />

</Field.ArraySelection>

Option selected

Code Editor
<Field.ArraySelection

  variant="button"

  value={['bar']}

  onChange={(values) => console.log('onChange', values)}

>

  <Field.Option value="foo" title="Foo!" />

  <Field.Option value="bar" title="Baar!" />

  <Field.Option value="baz" title="Bazz!" />

  <Field.Option value="qux" title="Quxx!" />

</Field.ArraySelection>

Horizontal layout

Code Editor
<Field.ArraySelection

  variant="button"

  label="Label text"

  value={['bar']}

  layout="horizontal"

  onChange={(values) => console.log('onChange', values)}

>

  <Field.Option value="foo" title="Foo!" />

  <Field.Option value="bar" title="Baar!" />

  <Field.Option value="baz" title="Bazz!" />

  <Field.Option value="qux" title="Quxx!" />

</Field.ArraySelection>

Horizontal options-layout

Code Editor
<Field.ArraySelection

  variant="button"

  label="Label text"

  value={['bar']}

  optionsLayout="horizontal"

  onChange={(values) => console.log('onChange', values)}

>

  <Field.Option value="foo" title="Foo!" />

  <Field.Option value="bar" title="Baar!" />

  <Field.Option value="baz" title="Bazz!" />

  <Field.Option value="qux" title="Quxx!" />

</Field.ArraySelection>

Horizontal layout and horizontal options-layout

Code Editor
<Field.ArraySelection

  variant="button"

  label="Label text"

  value={['bar']}

  layout="horizontal"

  optionsLayout="horizontal"

  onChange={(values) => console.log('onChange', values)}

>

  <Field.Option value="foo" title="Foo!" />

  <Field.Option value="bar" title="Baar!" />

  <Field.Option value="baz" title="Bazz!" />

  <Field.Option value="qux" title="Quxx!" />

</Field.ArraySelection>

Disabled

Code Editor
<Field.ArraySelection

  variant="button"

  value={['bar']}

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  disabled

>

  <Field.Option value="foo" title="Foo!" />

  <Field.Option value="bar" title="Baar!" />

  <Field.Option value="baz" title="Bazz!" />

  <Field.Option value="qux" title="Quxx!" />

</Field.ArraySelection>

Info

FYI
Code Editor
<Field.ArraySelection

  variant="button"

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  info={new FormError('FYI')}

>

  <Field.Option value="foo" title="Foo!" />

  <Field.Option value="bar" title="Baar!" />

  <Field.Option value="baz" title="Bazz!" />

  <Field.Option value="qux" title="Quxx!" />

</Field.ArraySelection>

Warning

I'm warning you...
Code Editor
<Field.ArraySelection

  variant="button"

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  warning={new FormError("I'm warning you...")}

>

  <Field.Option value="foo" title="Foo!" />

  <Field.Option value="bar" title="Baar!" />

  <Field.Option value="baz" title="Bazz!" />

  <Field.Option value="qux" title="Quxx!" />

</Field.ArraySelection>

Error

This is what is wrong...
Code Editor
<Field.ArraySelection

  variant="button"

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  error={new FormError('This is what is wrong...')}

>

  <Field.Option value="foo" title="Foo!" />

  <Field.Option value="bar" title="Baar!" />

  <Field.Option value="baz" title="Bazz!" />

  <Field.Option value="qux" title="Quxx!" />

</Field.ArraySelection>