Radios and checkboxes

FormRadio and FormCheckbox render one choice each: the native input, made invisible but still focusable, under a box drawn from the form tokens, followed by its label. For a labelled group with a description, an error message and group roles, use RadioField and CheckboxField.

import { FormCheckbox } from '@systhemaui/next'

export default function Demo() {
  return (
    <div style={{ display: 'grid', gap: 12 }}>
      <FormCheckbox
        id="choice-news"
        name="choice-topics"
        value="news"
        label="Product news"
        defaultChecked
      />
      <FormCheckbox
        id="choice-events"
        name="choice-topics"
        value="events"
        label="Events and webinars"
      />
      <FormCheckbox id="choice-offers" name="choice-topics" value="offers" label="Offers" />
    </div>
  )
}

ImportLink to this section

import { FormCheckbox, FormRadio } from '@systhemaui/next'

In a React app without Next.js, import them from @systhemaui/react.

ExamplesLink to this section

RadiosLink to this section

Radios that share a name form one choice. Give each one its own id: without it, id falls back to name, so every radio of the group would get the same id and each label would point at the first radio.

import { FormRadio } from '@systhemaui/next'

export default function Demo() {
  return (
    <div style={{ display: 'grid', gap: 12 }}>
      <FormRadio id="plan-monthly" name="plan" value="monthly" label="Monthly" defaultChecked />
      <FormRadio id="plan-yearly" name="plan" value="yearly" label="Yearly (2 months free)" />
      <FormRadio id="plan-lifetime" name="plan" value="lifetime" label="Lifetime" />
    </div>
  )
}

Labels with linksLink to this section

label is an HTML string, inserted with dangerouslySetInnerHTML, so it can carry a link or emphasis. Only pass trusted strings, never visitor input.

import { FormCheckbox } from '@systhemaui/next'

export default function Demo() {
  return (
    <FormCheckbox
      id="choice-terms"
      name="choice-terms"
      value="accepted"
      label='I accept the <a class="link" href="#labels-with-links">terms and conditions</a>'
      required
    />
  )
}

StatesLink to this section

The box takes the checked colors when its input is checked, the invalid colors once a required input is :user-invalid (after the visitor has interacted with it or tried to submit), and the disabled opacity when the input is disabled.

import { FormCheckbox, FormRadio } from '@systhemaui/next'

export default function Demo() {
  return (
    <div style={{ display: 'grid', gap: 12 }}>
      <FormCheckbox
        id="state-checked"
        name="state-checked"
        value="1"
        label="Checked"
        defaultChecked
      />
      <FormCheckbox id="state-disabled" name="state-disabled" value="1" label="Disabled" disabled />
      <FormRadio
        id="state-radio-disabled"
        name="state-radio"
        value="1"
        label="Disabled radio"
        disabled
        defaultChecked
      />
    </div>
  )
}

Extra contentLink to this section

prepend and append render inside the wrapper before the input and after the label, for a badge or a price next to the choice. wrapperProps forwards attributes to the wrapper <div>; className also goes on the wrapper, while every other prop goes to the <input>.

PropsLink to this section

FormRadioLink to this section

FormCheckboxLink to this section

HTML and CSSLink to this section

<div class="form-checkbox">
  <input type="checkbox" id="news" name="topics" value="news" />
  <label for="news">Product news</label>
</div>

<div class="form-radio">
  <input type="radio" id="plan-monthly" name="plan" value="monthly" checked />
  <label for="plan-monthly">Monthly</label>
</div>

The wrapper draws the box with ::before and the mark with ::after: a dot for radios, and for checkboxes the icon set with blocks.form.checkboxIcon (see Component CSS blocks). Wrap several choices in .form-inline-input-group to space them by --form-input-inline-space-y.

Next.jsLink to this section

@systhemaui/next re-exports FormRadio and FormCheckbox from @systhemaui/react unchanged.

AccessibilityLink to this section

• The native input stays in the page (transparent, on top of the box), so keyboard focus, Space and screen-reader states work as usual.
• Name a group of radios or checkboxes: wrap it in a role="radiogroup" or role="group" element with aria-labelledby, or use RadioField / CheckboxField, which do it for you.
• A checkbox or radio has no visible focus style beyond what you add; the input is transparent, so style the box with a :has(:focus-visible) selector on .form-checkbox / .form-radio if your tokens need one.

RelatedLink to this section

• Form fields
• Form controls