NerdfishUI

Checkbox

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

View on GitHub
'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

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-danger"
				textClassName="text-danger"
				name="newsletters4"
				defaultChecked
			/>
		</div>
	)
}