#ArraySelection

<Field.ArraySelection
  onChange={(value) => console.log('onChange', value)}
  variant="checkbox"
>
  <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>

<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.ArraySelection>

<Field.ArraySelection
  value={['bar']}
  onChange={(values) => console.log('onChange', values)}
>
  <Field.Option value="foo" title="Foo!" />
  <Field.Option value="bar" title="Baar!" />
</Field.ArraySelection>

<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.ArraySelection>

<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.ArraySelection>

<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.ArraySelection>

<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.ArraySelection>