Choice Box

Checkbox/Radio without labels; use with cards or lists.

Last updated 5/23/2025

Variants

There are two variants. Using a ChoiceBox on its own is not recommended.

Checkbox
Radio

import { ChoiceBox, RadioGroup } from "@serendie/ui";
import { Dd, Dl, Dt } from "src/components/LayoutUtils";

export function TypeSample() {
  return (
    <Dl>
      <Dt>Checkbox</Dt>
      <Dd>
        <ChoiceBox type="checkbox" value="itemA" />
      </Dd>
      <Dt>Radio</Dt>
      <Dd>
        <RadioGroup>
          <ChoiceBox type="radio" value="itemA" />
        </RadioGroup>
      </Dd>
    </Dl>
  );
}

Indeterminate state

Checkbox-type ChoiceBox can be set to indeterminate to represent partial selection (e.g., some child items selected).

import { ChoiceBox } from "@serendie/ui";

export function IndeterminateSample() {
  return <ChoiceBox type="checkbox" value="itemA" indeterminate={true} />;
}