Component reference

ChoiceGroup

Visible single choices with native radio keyboard, validation and form semantics.

Preview

Compare options directly

For a small set of options that need direct comparison. Native radios keep arrow keys, Tab, form reset and required validation.

packages/meowtail/stories/chat-question.stories.tsxline 172tsx

render: () => (
  <form className="workshop-stack workshop-constrained">
    <ChoiceGroup
      id="startup-choice"
      name="startup"
      label="What should open at startup?"
      defaultValue="last"
      options={[
        {
          value: "last",
          label: "The last work",
          description: "Return to where you left off and continue unfinished content.",
        },
        {
          value: "new",
          label: "Blank page",
          description: "Start from a new workspace.",
        },
        {
          value: "team",
          label: "Team overview",
          description: "The current workspace is not connected to a team.",
          disabled: true,
        },
      ]}
    />
    <Button type="reset" variant="outline">
      Reset selection
    </Button>
  </form>
)

Installation

bun add meowtail

Usage

usage.tsts

import { ChoiceGroup } from "meowtail";

API reference

Props

Prop	Type	Default
`options`RequiredOptions are fixed for the mount.	`readonly ChoiceGroupOption[]`	–
`label`Required	`string`	–
`hideLabel`	`boolean`	`false`
`id`	`string`	`choice-group-${++nextChoiceGroupId}`
`name`	`string`	`id`
`form`	`string`	–
`value`	`MaybeSignal<string>`	–
`defaultValue`	`string`	`""`
`onValueChange`	`(value: string) => void`	–
`disabled`	`boolean`	`false`
`required`	`boolean`	`false`

Also takes className, children and the attributes and events of its root element.

DOM parts

rootlegendoptionsoptioninputcontentlabeldescription

Registry

The component is registered as choice-group in the meowtail component registry.