Checkbox

A checkbox is a form component that allows the user to select one or more options from a set.

'use client'

import { Checkbox } from '@nerdfish/ui'

export function CheckboxExample() {
	return (
		<div className="space-x-sm flex items-center">
			<Checkbox name="newsletter" />
		</div>
	)
}

Usage

import { Checkbox } from '@nerdfish/ui'

<Checkbox />

Examples

With text

Subscribe to our newsletter

We'll send you the latest news and updates.

'use client'

import { Checkbox, Description, Field, Label } from '@nerdfish/ui'

export function CheckboxWithTextExample() {
	return (
		<div className="items-top flex flex-col space-y-2">
			<Field>
				<Label className="gap-sm flex items-center">
					<Checkbox name="newsletter" />
					Subscribe to our newsletter
				</Label>

				<Description>
					We&apos;ll send you the latest news and updates.
				</Description>
			</Field>
		</div>
	)
}

Disabled

'use client'

import { Checkbox } from '@nerdfish/ui'

export function CheckboxDisabledExample() {
	return (
		<div className="gap-md space-x-sm flex flex-col items-center">
			<Checkbox name="newsletter2" disabled />
			<Checkbox checked name="newsletter3" disabled />
		</div>
	)
}

Icon

'use client'

import { Checkbox } from '@nerdfish/ui'
import { Cross } from 'lucide-react'

export function CheckboxIconExample() {
	return (
		<div className="space-x-sm flex items-center">
			<Checkbox icon={Cross} name="newsletter5" defaultChecked />
		</div>
	)
}

Colors

'use client'

import { Checkbox } from '@nerdfish/ui'

export function CheckboxColorsExample() {
	return (
		<div className="items-top space-x-sm flex flex-col">
			<Checkbox
				bgClassName="bg-background-danger"
				textClassName="text-foreground-danger"
				name="newsletters4"
				defaultChecked
			/>
		</div>
	)
}