Value.ArraySelection → Demos

No value given

<Value.ArraySelection placeholder="No value given" />

Value#

Foo, Bar og Baz

<Value.ArraySelection value={['Foo', 'Bar', 'Baz']} />

Custom format#

<Form.Handler
  locale="en-GB"
  data={{
    myPath: [123, 456, 789],
  }}
>
  <Value.ArraySelection
    path="/myPath"
    format={{
      type: 'disjunction',
    }}
  />
</Form.Handler>

Label#

Label text

<Value.ArraySelection label="Label text" showEmpty />

Label and value#

Label textFoo, Bar og Baz

<Value.ArraySelection label="Label text" value={['Foo', 'Bar', 'Baz']} />

Inline#

This is before the component Foo, Bar og Baz This is after the component

<P>
  This is before the component{' '}
  <Value.ArraySelection value={['Foo', 'Bar', 'Baz']} inline /> This is
  after the component
</P>

List variants#

Ordered List

Unordered List

<Value.SummaryList>
  <Value.ArraySelection
    value={['Foo', 'Bar', 'Baz']}
    label="Ordered List"
    variant="ol"
  />
  <Value.ArraySelection
    value={['Foo', 'Bar', 'Baz']}
    label="Unordered List"
    variant="ul"
  />
</Value.SummaryList>

List types#

Ordered List a

Ordered List A

Ordered List i

Ordered List I

Unordered List square

Unordered List circle

Unordered List unstyled

Field.Option and Field.ArraySelection#

When using the same path as on a Field.ArraySelection, the Field.Option title will be used as the displayed value.

<Form.Handler>
  <Flex.Stack>
    <Field.ArraySelection
      label="My selections"
      path="/myPath"
      value={['bar', 'baz']}
    >
      <Field.Option value="foo" title="Foo" />
      <Field.Option value="bar" title="Bar" />
      <Field.Option value="baz" title="Baz" />
    </Field.ArraySelection>

    <Value.ArraySelection inheritLabel path="/myPath" />
  </Flex.Stack>
</Form.Handler>

Value.ArraySelection#

Demos#

Placeholder#