Checkbox

Checkboxes are used when there are multiple items to select in a list. Users can make a selection of zero, one, or any number of items.

import * as UI from "@iyk/ui"

export default () => (
  <UI.Fieldset>
    <UI.Field name="good-apples">
      <UI.Label>Good Apples</UI.Label>

      <div className="flex flex-col gap-2">
        <UI.Checkbox align="start" defaultChecked>
          Braeburn
        </UI.Checkbox>
        <UI.Checkbox align="center" defaultChecked>
          Fuji
        </UI.Checkbox>
        <UI.Checkbox>Gala</UI.Checkbox>
      </div>

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

    <UI.Field name="consent">
      <UI.Label>Consent</UI.Label>

      <div className="flex flex-col gap-2">
        <UI.Checkbox align="start" fontSize="xs" defaultChecked>
          I agree to receive marketing messages and updates about music, shows, and all things IYK.
          Unsubscribe at any time. Please read our Privacy Policy for more information about how we
          handle your personal information, including for marketing.
        </UI.Checkbox>
      </div>

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