Checkbox

The Checkbox component provides you with checkbox components and groups.

Live Examples

Live Example

☀️

Copy

View Code

import { Checkbox } from '@jarllyng/nostromo' export default function CheckboxExample() { return ( <div className="space-y-4"> <div className="flex items-center space-x-2"> <Checkbox id="terms" /> <label htmlFor="terms">Accept terms and conditions</label> </div> ...

Import


import { Checkbox } from "@jarllyng/nostromo";
// or
import { Checkbox } from "@jarllyng/nostromo/checkbox";

Usage


import { Checkbox, Label } from "@jarllyng/nostromo";
 
export default function Example() {
  const [checked, setChecked] = React.useState(false);
 
  return (
    <div className="flex items-center space-x-2">
      <Checkbox id="terms" checked={checked} onCheckedChange={setChecked} />
      <Label htmlFor="terms">Accept terms</Label>
    </div>
  );
}

With Label

Live Example

☀️

Copy

View Code

import { Checkbox, Label } from '@jarllyng/nostromo' export default function CheckboxWithLabel() { return ( <div className="space-y-4"> <div className="flex items-center space-x-2"> <Checkbox id="option1" /> <Label htmlFor="option1">Option 1</Label> </div> <div className="flex items-center space-x-2">...

Props

Prop	Type	Default	Required	Description
`checked`	`boolean`	`false`	No	Whether the checkbox is checked (controlled)
`defaultChecked`	`boolean`	`false`	No	Default checked state (uncontrolled)
`onCheckedChange`	`(checked: boolean) => void`	`undefined`	No	Callback when checked state changes
`disabled`	`boolean`	`false`	No	Whether the checkbox is disabled
`required`	`boolean`	`false`	No	Whether the checkbox is required
`error`	`boolean`	`false`	No	Whether the checkbox is in an error state
`label`	`string`	`undefined`	No	Label text (alternative to Label component)
`helperText`	`string`	`undefined`	No	Helper text displayed below checkbox
`id`	`string`	`undefined`	No	Checkbox ID (auto-generated if not provided)
`name`	`string`	`undefined`	No	Name for form submission
`value`	`string`	`undefined`	No	Value for form submission
`className`	`string`	`undefined`	No	Additional CSS classes

Standard HTML Input Props

The Checkbox component extends all standard HTML input attributes (except size), including:

autoFocus, form, formAction, formEncType, formMethod, formNoValidate, formTarget
aria-* attributes for accessibility
data-* attributes for custom data