Checkbox

A control that allows the user to toggle between checked and not checked.

Installation

bash

npx @smicolon/fasla-ui@latest add checkbox

Run init once per project before adding components. See Installation.

Preview

Accept terms

Email me a weekly summary of new components and release notes

With Label & Description

Email notifications

Marketing emails

Receive emails about new products and features

Security alerts

Get notified about security updates

Props

Prop	Type	Default	Description
`checked`	`boolean`	—	Checked state. Use it with `onChange`.
`indeterminate`	`boolean`	`false`	Shows a dash for a partly selected group.
`disabled`	`boolean`	`false`	Disables the checkbox and dims it.
`error`	`boolean`	`false`	Marks the checkbox as invalid.
`label`	`string`	—	Label text.
`description`	`string`	—	Secondary line below the label.
`name`	`string`	—	Name submitted with the form.
`value`	`string`	—	Value submitted when checked.
`onChange`	`(event) => void`	—	Called when the checkbox changes.
`className`	`string`	—	Extra classes for the component.

Usage

Basic checkbox

tsx

"use client"

import { Checkbox } from "@/components/ui/checkbox"

export function TermsCheckbox() {
  return <Checkbox name="terms" aria-label="Accept terms and conditions" />
}

With label

tsx

"use client"

import { Checkbox } from "@/components/ui/checkbox"

export function TermsCheckbox() {
  return <Checkbox name="terms" label="Accept terms and conditions" />
}

With description

tsx

"use client"

import { Checkbox } from "@/components/ui/checkbox"

export function MarketingCheckbox() {
  return (
    <Checkbox
      name="marketing"
      label="Marketing emails"
      description="Receive emails about new products"
    />
  )
}

Indeterminate state

tsx

"use client"

import { Checkbox } from "@/components/ui/checkbox"

export function SelectAllCheckbox() {
  return <Checkbox label="Select all" indeterminate />
}

Error state

tsx

"use client"

import { Checkbox } from "@/components/ui/checkbox"

export function RequiredCheckbox() {
  return <Checkbox name="terms" label="Required field" required error />
}