Checkbox

Basic checkbox example demonstrating core behavior.

Package: @solidiom/checkbox
Version: 0.0.1-next.0
Status: stable

Examples

import * as Checkbox from "@solidiom/checkbox"

;<Checkbox.Group>Checkbox content</Checkbox.Group>

Toggle with Space to check or uncheck.

View source

        export function CheckboxExample(props: CheckboxExampleProps) {
  const copy = () => COPY[props.locale]
  const [checked, setChecked] = createSignal(false)

  return (
    <div ref={(el) => el.setAttribute("data-hydrated", "true")} class="checkbox-example">
      <Checkbox.Root checked={checked} onCheckedChange={setChecked} aria-label={copy().label}>
        <Checkbox.Indicator>{checked() ? "✓" : ""}</Checkbox.Indicator>
      </Checkbox.Root>
      <span>{copy().description}</span>
    </div>
  )
}