Choice

When to useLink to "When to use"

• Building a new kind of choice control (a star, a coloured chip) that needs the same label, description, forms and touch behaviour as a checkbox.

Use something else when:

• you need a checkbox: Checkbox
• you need an on/off setting: Switch
• one option of several: RadioGroup or SegmentedControl

UsageLink to "Usage"

import { Choice, ChoiceBase } from "@arshad-shah/cynosure";

<Choice
  label="Show hidden files"
  description="Dotfiles and system folders."
  onChange={setShown}
  control={(input) => (
    <span className="my-star">
      <ChoiceBase {...input} type="checkbox" />
    </span>
  )}
/>

control receives the input's props: its id, aria-labelledby, aria-describedby, checked or defaultChecked, onChange, and name, value, required and disabled. Spread them onto ChoiceBase, which hides the native input over your drawing. The input must be a direct child of the element control returns. onChange on Choice receives the new checked boolean.

Done styleLink to "Done style"

strikeWhenChecked strikes through and mutes the label while the input is checked (and not indeterminate), and mutes the description with it. An input placed inside the label does not count.

PropsLink to "Props"

Behaviour and accessibilityLink to "Behaviour and accessibility"

• Name and description: the label names the input and the description is linked with aria-describedby.
• Forms: the input is native, so FormData, reset and required work as the browser does them.
• Disabled: the input is disabled and the row is dimmed with a not-allowed cursor.
• Done style: the checked state is what is announced; the strike only shows it. In forced colours the strike stays, in the system text colour; the colour change stops under reduced motion.

TouchLink to "Touch"

The row is at least 24px tall, and 44px on coarse pointers, where the control is centred on the text.

ThemingLink to "Theming"

createTheme({ components: { choice: { gap: "12px" } } });

RelatedLink to "Related"

Checkbox · Switch · RadioGroup · ChoiceBase