Mixins / foldkit-mixins-ui

CheckboxGroup

namespace · packages/mixins-ui/src/checkboxGroup.ts:1

export * as CheckboxGroup from './checkboxGroup.js'

In the guides

Members

CheckboxGroup.CheckboxGroupOption

interface · packages/mixins-ui/src/checkboxGroup.ts:29

interface CheckboxGroupOption<Value extends string> {
  readonly value: Value
  readonly label: string
  readonly description?: string | undefined
  readonly disabled?: boolean | undefined
}

CheckboxGroup.CheckboxGroupSlots

const · packages/mixins-ui/src/checkboxGroup.ts:16

const CheckboxGroupSlots: Slots.Contract<{ readonly root: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly legend: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly option: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly checkbox: Slot.UnnamedSlot<Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>, readonly [Event.EventToken<"click">], readonly [Attr.AttrToken<"role">, Attr.AttrToken<"aria-disabled">, Attr.AttrToken<"disabled">], readonly Slot.RequirementName[], boolean>; readonly label: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly description: Slot.UnnamedSlot<Capability.Capability<"Container", readon …;

A group of checkboxes for one question, as Zag's checkbox group: a fieldset named by its legend, and a row per option with the APG's checkbox (a button with role="checkbox" and aria-checked, which Space presses) named by a label for it, so a press on the words toggles it too. The checked values are the application's: the view draws checked and sends onToggle, and toggled is the transition update applies. checkbox and label take the same contract as the Checkbox's, so its recipe's pieces style them.

CheckboxGroup.CheckboxGroupView

interface · packages/mixins-ui/src/checkboxGroup.ts:36

interface CheckboxGroupView<Value extends string, Message> {
  readonly legend: string
  readonly options: ReadonlyArray<CheckboxGroupOption<Value>>
  readonly checked: ReadonlyArray<Value>
  readonly onToggle: (value: Value) => NoInfer<Message>
  readonly id: string
  readonly style?: NamedStyle<typeof CheckboxGroupSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
}

CheckboxGroup.toggled

function · packages/mixins-ui/src/checkboxGroup.ts:53

function toggled<Value extends string>(
  checked: ReadonlyArray<Value>,
  value: Value,
): ReadonlyArray<Value>

The checked values after value is pressed: on if it was off, off if it was on.

CheckboxGroup.view

function · packages/mixins-ui/src/checkboxGroup.ts:58

function view<Value extends string, Message>(
  options: CheckboxGroupView<Value, Message>,
  h: HtmlBuilder<Message>,
): Html