OptionsToggle

A component that displays a list of options that can be selected

Props

className

String

direction

'horizontal' │ 'vertical'

'horizontal'

onChange

Func

required

options

Array<{ "label": "number │ string │ node", "value": "number │ string" }>

required

value

number │ string

required

Examples

Default Usage

Referrals

<State initial={{ value: 1 }}>
  {({ state, setState }) => (
    <OptionsToggle
      size="small"
      theme="red"
      value={state.value}
      onChange={value => {
        console.log('value', value)
        setState({ value })
      }}
      options={[
        { label: 'Referrals', value: 1 },
        { label: 2, value: 2 },
        { label: <Icon icon="market-center" />, value: 3 },
      ]}
    />
  )}
</State><State initial={{ value: 1 }}>
  {({ state, setState }) => (
    <OptionsToggle
      size="small"
      theme="red"
      value={state.value}
      onChange={value => {
        console.log('value', value)
        setState({ value })
      }}
      options={[
        { label: 'Referrals', value: 1 },
        { label: 2, value: 2 },
        { label: <Icon icon="market-center" />, value: 3 },
      ]}
    />
  )}
</State>

Direction

Option 1

<State initial={{ value: 1 }}>
  {({ state, setState }) => (
    <OptionsToggle
      value={state.value}
      onChange={value => {
        console.log('value', value)
        setState({ value })
      }}
      options={[
        { label: 'Option 1', value: 1 },
        { label: 2, value: 2 },
        { label: <Icon icon="market-center" />, value: 3 },
      ]}
      direction="vertical"
    />
  )}
</State><State initial={{ value: 1 }}>
  {({ state, setState }) => (
    <OptionsToggle
      value={state.value}
      onChange={value => {
        console.log('value', value)
        setState({ value })
      }}
      options={[
        { label: 'Option 1', value: 1 },
        { label: 2, value: 2 },
        { label: <Icon icon="market-center" />, value: 3 },
      ]}
      direction="vertical"
    />
  )}
</State>

OptionsToggle

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Props

Examples

Default Usage

Direction

Props