Components

Checkbox group

A question answered with any number of options, under its legend.

variant
scheme
Email me about

When someone names you.

forSlots(CheckboxGroupSlots)(Recipes.CheckboxGroup({}))

Usage

The function that drew the preview, over the theme module Create a theme writes. The preview passes it the style picked above instead of its default.

export const CheckboxGroupStyle = forSlots(CheckboxGroupSlots)(
  Recipes.CheckboxGroup({ variant: 'list' }),
)

export const checkboxGroup = <Message>(
  style: NamedStyle<typeof CheckboxGroupSlots>,
  checked: ReadonlyArray<string>,
  onToggle: (value: string) => Message,
  h: HtmlBuilder<Message>,
): Html =>
  CheckboxGroup.view(
    {
      id: 'alerts',
      legend: 'Email me about',
      options: [
        { value: 'mentions', label: 'Mentions', description: 'When someone names you.' },
        { value: 'replies', label: 'Replies to my comments' },
        { value: 'digest', label: 'A weekly digest' },
        { value: 'offers', label: 'Offers', disabled: true },
      ],
      checked,
      onToggle,
      style,
    },
    h,
  )

The recipe ↗This code ↗