Overview

About

Getting Started

Layout

Box

Flex

Grid

Components

Accordion

Badge

Button

Checkbox

Panel

Portal

Progress Bar

Select

Skeleton

Separator

Switch

Theme

Tooltip

Properties

Color

Margin

Padding

Radius

Size

Spacing

Checkbox Component

A versatile Checkbox, managing state, context, and styling. 
import { Checkbox } from "@locus-ui/components";import styles from "./styles.css";
<Checkbox variant="outlined">  <Checkbox.Label>Accept Terms</Checkbox.Label></Checkbox>

View Source

Anatomy

Import the component and its parts:

Anatomy

import { Checkbox } from "@locus-ui/components";        <Checkbox>  <Checkbox.Indicator />  <Checkbox.Label /></Checkbox>

Examples

Variants

Checkbox components come with three built in variants, solid, outlined, and muted.

variants.tsx

import { Checkbox } from "@locus-ui/components";
const variants = ["outlined", "solid", "muted"];
return variants.map((variant) => (  <Checkbox key={variant} variant={variant}>    <Checkbox.Label>{variant}</Checkbox.Label>  </Checkbox>));

Label Positions

The label element <label> is available in the checkbox component anatomy. If included it can be easily positioned with the position prop.

label-positions.tsx

import { Checkbox } from "@locus-ui/components";
const labelPositions = ["top", "bottom", "left", "right"];
return labelPositions.map((position) => (  <Checkbox key={position} variant="muted">    <Checkbox.Label position={position}>      {position.charAt(0).toUpperCase() + position.slice(1)} Label    </Checkbox.Label>  </Checkbox>));

Sizes

To manage the size of the checkbox component you can provide a default or custom size through the size prop.

sizes.tsx

import { Checkbox } from "@locus-ui/components";
const sizes = ["xs", "sm", "md", "lg", "xl"];
return (  <>    {sizes.map((size) => (      <Checkbox key={size} size={size} variant="muted">        <Checkbox.Label>{size}</Checkbox.Label>      </Checkbox>    ))}    <Checkbox size="40px" variant="muted">

Colors

The checkbox component uses the color prop to allow for predefined and custom colors.

colors.tsx

import { Checkbox } from "@locus-ui/components";
const colors = [  "primary", "secondary", "tertiary",  "success", "danger", "warning", "info",];
return colors.map((color) => (  <Checkbox defaultChecked key={color} variant="muted" color={color}>    <Checkbox.Label>{color}</Checkbox.Label>  </Checkbox>));

Alignments

To set alignment of the checkbox and its label content you can use the align prop.

alignments.tsx

import { Checkbox } from "@locus-ui/components";
const alignments = ["start", "center", "end"];
return alignments.map((alignment) => (  <Checkbox key={alignment} align={alignment} variant="muted">    <Checkbox.Label>      {alignment} alignment. This alignment puts the components in the      {alignment} position relative to each other.    </Checkbox.Label>  </Checkbox>));

States

Checkboxes can be given the disabled, readonly, and defaultChecked states.

states.tsx

import { Checkbox } from "@locus-ui/components";
<Checkbox disabled variant="muted">  <Checkbox.Label>Disabled</Checkbox.Label></Checkbox><Checkbox readonly variant="muted">  <Checkbox.Label>Readonly</Checkbox.Label></Checkbox><Checkbox defaultChecked variant="muted">  <Checkbox.Label>Default Checked</Checkbox.Label></Checkbox>

Indeterminate

Checkboxes support the indeterminate state for representing a partially selected state.

indeterminate.tsx

import { Checkbox } from "@locus-ui/components";
const variants = ["outlined", "solid", "muted"];
return variants.map((variant) => (  <Checkbox key={variant} variant={variant} indeterminate>    <Checkbox.Label>{variant}</Checkbox.Label>  </Checkbox>));

High Contrast

Only available on the "solid" variant.

high-contrast.tsx

import { Checkbox } from "@locus-ui/components";
<Checkbox defaultChecked highContrast variant="solid">  <Checkbox.Label>Solid</Checkbox.Label></Checkbox><Checkbox indeterminate highContrast variant="solid">  <Checkbox.Indicator />  <Checkbox.Label>Solid Indeterminate</Checkbox.Label></Checkbox>