Choice

A choice lets you create a list of grouped options, ideal for toggling between one of multiple items.

import * as UI from "@iyk/ui"

export default () => (
  <UI.Field name="best-apple">
    <UI.Label>Best Apple</UI.Label>

    <UI.Choice.Group>
      <UI.Choice.Option defaultChecked>Braeburn</UI.Choice.Option>
      <UI.Choice.Option>Fuji</UI.Choice.Option>
      <UI.Choice.Option>Gala</UI.Choice.Option>
    </UI.Choice.Group>

    <UI.Validity />
  </UI.Field>
)

import * as UI from "@iyk/ui"

export default () => (
  <UI.Field name="best-apples">
    <UI.Label>Best Apples</UI.Label>

    <UI.Choice.Group multiple>
      <UI.Choice.Option defaultChecked>Braeburn</UI.Choice.Option>
      <UI.Choice.Option>Fuji</UI.Choice.Option>
      <UI.Choice.Option>Gala</UI.Choice.Option>
    </UI.Choice.Group>

    <UI.Validity />
  </UI.Field>
)