Basic usage example to understand how the Checker component functions.
Demonstrates the checkbox, switch, and radio options with default behavior and interaction.
Interactive configurator for exploring different customization options in the Checker component.
Customize icon styles, thumb behavior, and state transitions (e.g., checked, unchecked, indeterminate).
Size
Color
"use client";
import { useState } from "react";
import { Checker } from "@/ui/checker";
export function CheckerDemo() {
const [checked, setChecked] = useState(false);
return <Checker label="I agree to sell my privacy" onLabel="ON" offLabel="OFF" defaultChecked checked={checked} onCheckedChange={event => setChecked(event.currentTarget.checked)} />;
}
Explore how to modify the appearance of the icons used in the Checker.
This section allows you to replace the default icons with custom options, providing a more personalized look.
Demonstrates how to customize the labels associated with the icons in the Checker.
Helpful when you want to adjust the appearance or add specific text annotations to your checkboxes, switches, or radios.
Shows how to customize the thumb icon in switches.
Allows for greater flexibility in design by offering the ability to replace the default thumb with your custom design.
Introduces the Checker.Group, which groups multiple Checker components together for easier handling and consistent state management.
Useful for managing groups of checkboxes or radio buttons where mutual states need to be controlled.
Demonstrates the use of Checker.Group within a card-like UI structure for better organization and presentation.
Ideal for grouping related items in a visually appealing way.
Displays how the Checker component handles single or multiple selected items within a group.
Ideal for showcasing the active state or the currently selected checkbox, switch, or radio.
CurrentValue: –
"use client";
import { useState } from "react";
import { Checker } from "@/ui/checker";
import { Group } from "@/ui/group";
import { Stack } from "@/ui/stack";
import { Typography } from "@/ui/typography";
const data = [
{ value: "react", label: "React", description: "A JavaScript library for building user interfaces." },
{ value: "svelte", label: "Svelte", description: "A compiler that generates minimal and efficient JavaScript code." },
{ value: "ng", label: "Angular", description: "A platform for building mobile and desktop web applications." },
{ value: "vue", label: "Vue", description: "A progressive JavaScript framework for building UI.", error: "Compatibility issues with older versions of Internet Explorer." },
];
export function CheckerCurrentSelectedDemo() {
const [value, setValue] = useState<string | string[] | null>(null);
const cards = data.map(i => (
<Checker.Card key={i.value} value={i.value}>
<Checker id={i.value} {...i} />
</Checker.Card>
));
return (
<Stack>
<Checker.Group value={value} onValueChange={setValue}>
<Group>{cards}</Group>
</Checker.Group>
<Typography prose="p" className="mt-8">
CurrentValue: {value || "–"}
</Typography>
</Stack>
);
}
Shows how to handle multiple selected items in the Checker.Group.
Useful for scenarios where multiple choices can be selected simultaneously, such as multi-checkbox forms.
CurrentValue: -
"use client";
import { useState } from "react";
import { Checker } from "@/ui/checker";
import { CheckIcon, XIcon } from "@/icons/*";
const data = [
{ value: "next", label: "Next.js", description: "A React framework for building server-rendered applications with great performance and scalability." },
{ value: "gatsby", label: "Gatsby", description: "A React-based framework optimized for building fast, static websites with GraphQL.", error: "Potential performance issues with large data sources due to build times." },
{ value: "remix", label: "Remix", description: "A full-stack framework for building modern web applications focused on user experience and performance.", error: "Limited ecosystem compared to Next.js and Gatsby." },
];
export function CheckerMultipleSelectedDemo() {
const [value, setValue] = useState<string[] | string | null>([]);
return (
<>
<Checker.Group multiple value={value} onValueChange={setValue} classNames={{ group: "gap-3" }}>
{data.map(i => (
<Checker.Card key={i.value} value={i.value}>
<Checker
{...i}
id={i.value}
icon={value?.includes(i.value) ? <CheckIcon size={12} stroke={3} color="green" /> : <XIcon size={12} stroke={3} color="red" />}
/>
</Checker.Card>
))}
</Checker.Group>
<p className="mt-8 w-full text-left text-sm text-muted-foreground">CurrentValue: {value?.length ? JSON.stringify(value) : "-"}</p>
</>
);
}
Demonstrates how to implement and visually represent the indeterminate state in checkboxes.
The indeterminate state is useful for scenarios like "select all" where some but not all items are checked.