Forms

Checkbox

A square check in ink, with optional indeterminate state and built-in label.

import { Checkbox } from '@jsonresume/ui'Source(opens in a new tab)

Examples

States

Show my email addressShow my phone numberSome sections selectedUnavailable

checkbox/basic.tsx

import { Checkbox, Stack } from '@jsonresume/ui';

export default function CheckboxBasic() {
  return (
    <Stack gap={3}>
      <Checkbox label="Show my email address" defaultChecked />
      <Checkbox label="Show my phone number" />
      <Checkbox label="Some sections selected" checked="indeterminate" />
      <Checkbox label="Unavailable" disabled />
    </Stack>
  );
}

GroupA fieldset and legend name the group for screen readers.

Show on my public resume

Email addressPhone numberStreet address

Show code

checkbox/group.tsx

import { Checkbox, Stack, Text } from '@jsonresume/ui';
import * as styles from './group.css';

// Related checkboxes share a <fieldset> whose <legend> names the group.
export default function CheckboxGroup() {
  return (
    <fieldset className={styles.fieldset}>
      <legend>
        <Text weight="semibold" as="span">
          Show on my public resume
        </Text>
      </legend>
      <Stack gap={3} className={styles.options}>
        <Checkbox label="Email address" defaultChecked />
        <Checkbox label="Phone number" />
        <Checkbox label="Street address" />
      </Stack>
    </fieldset>
  );
}

checkbox/group.css.ts

import { style } from '@vanilla-extract/css';
import { vars } from '@jsonresume/ui/tokens';

export const fieldset = style({
  border: 0,
  margin: 0,
  padding: 0,
  minWidth: 0,
});

export const options = style({ marginTop: vars.space[3] });

Accessibility

Clicking the label toggles the box.
Space toggles it from the keyboard.

Props

Also accepts the attributes of the element Checkbox renders.
Prop	Type	Default	Description
label	ReactNode	–	Visible label rendered beside the control.