Skip to content
Yuzur1ha Open

Component referenceDraft

Checkbox

Checkbox supports independent choices through a native checkbox input.

Updated

Design notes

Keep checked state and its label together. Use a switch for settings that apply immediately and a radio group for mutually exclusive choices.

Design sourceOpen in Figma

Checkbox design

Inspect the original component, variants and visual details.

Playground

Playgrounddemo.tsx
false

content/components/checkbox/demo.tsx

import { useState } from "react"
import { Checkbox } from "@yuzur1ha/ui"
import { DemoResult } from "../../examples/result"

export function CheckboxDemo() {
  const [value, setValue] = useState(false)
  return (
    <>
      <Checkbox
        label="Keep me updated"
        checked={value}
        onChange={(event) => setValue(event.target.checked)}
      />
      <Checkbox label="Disabled" disabled />
      <DemoResult>{String(value)}</DemoResult>
    </>
  )
}

API

Checkbox

A labelled native checkbox. Use checked/defaultChecked for state; value is only the submitted form value. className styles the label, ref points to the input.

CheckboxProps
PropertyTypeRequiredDefaultDescription
labelstringYes—Visible label and accessible name.
checkedbooleanNo—Controlled checked state. Pair with onChange.
defaultCheckedbooleanNo—Initial checked state for an uncontrolled checkbox or radio.
onChangeChangeEventHandler<HTMLInputElement, HTMLInputElement>No—Native input change handler. Read value or checked from event.currentTarget.
disabledbooleanNo—Disables the native control.
requiredbooleanNo—Requires a non-empty native control value during form validation.
namestringNo—Native form submission field name.
valuestring | number | readonly string[]No—Current native control value. Pair with onChange for controlled input.
idstringNo—Native control ID. Generated when omitted; the visible label and supporting text use this association.
classNamestringNo""Additional classes applied to the component’s documented root or control.
refRef<HTMLInputElement>No—Ref to the component’s documented DOM element.

No custom imperative methods. Event callbacks are listed as properties.