Check - Beautify Demo

Prefer combined utilities like check-subtle-primary over separate check-subtle check-primary — smaller CSS output.
Use check-indeterminate for semi-checked state, or the native :indeterminate pseudo-class.
Sizes use check-4 ~ check-15 (4 ~ 15 spacing units). Height increases by 1 spacing unit per step.
Shape modifiers (check-pill, check-rounded, check-square, check-fluid) apply to variants with background/border (subtle, vivid, ghost, outline, muted, tick).

Radio

Option 1 Option 2 Bold border Checked Disabled

Checkbox

Option 1 Option 2 Bold border Checked Disabled

check-subtle

Soft filled background.

Radio Checked Disabled Checkbox Checked Disabled

check-vivid

Color inversion on hover / checked.

Radio Checked Disabled Checkbox Checked Disabled

check-ghost

Transparent with hover background.

Radio Checked Disabled Checkbox Checked Disabled

check-outline

Solid border button-like.

Radio Checked Disabled Checkbox Checked Disabled

check-muted

Soft gray border.

Radio Checked Disabled Checkbox Checked Disabled

check-tick

Checkmark icon only, no box.

Radio Checked Disabled Checkbox Checked Disabled

check-indeterminate

Indeterminate Primary indeterminate

check-reverse

Label on the left side.

Reverse layout

check-full

Full-width horizontal fill.

This option fills the parent container width.

check-multiline

Multi-line text, top-aligned with input.

This is a long multi-line option. When the text is too long it will wrap automatically to keep the layout clean and readable.

check-pill (pill)

Circle shape Circle outline

check-rounded (micro-rounded)

Rounded Rounded outline

check-square (sharp)

Square Square outline

check-fluid (height-proportional)

Fluid round Fluid outline

check-4 (16px) ~ check-7 (28px)

check-4 check-5 check-6 check-7

check-8 (32px) ~ check-11 (44px)

check-8 check-9 check-10 check-11

check-12 (48px) ~ check-15 (60px)

check-12 check-13 check-14 check-15

Primary

Radio Checkbox Subtle Outline

Secondary

Radio Checkbox Subtle Outline

Tertiary

Radio Checkbox Subtle Outline

Success

Radio Checkbox Subtle Outline

Error

Radio Checkbox Subtle Outline

Info

Radio Checkbox Subtle Outline

Warning

Radio Checkbox Subtle Outline

Caution

Radio Checkbox Subtle Outline

Highlight

Radio Checkbox Subtle Outline

Standalone compound variants — equivalent to variant + color in one class.

check-subtle-*

check-subtle-primary check-subtle-success check-subtle-error

check-vivid-*

check-vivid-primary check-vivid-success check-vivid-error

check-ghost-*

check-ghost-primary check-ghost-success check-ghost-error

check-outline-*

check-outline-primary check-outline-success check-outline-error

check-muted-*

check-muted-primary check-muted-success check-muted-error

check-tick-*

check-tick-primary check-tick-success check-tick-error

Multiple color formats are supported:

1. Theme semantic colors, e.g. *-error, *-error-hover
2. Tailwind built-in colors, e.g. *-indigo-500
3. Raw color values, e.g. *-[#ff0000]
4. CSS named colors, e.g. *-[red], *-[green]

check-blue-* custom color

check-blue-100 check-blue-500 check-blue-800

Subtle variant with custom color

check-blue-100 subtle check-blue-500 subtle check-blue-800 subtle

Outline variant with custom color

check-blue-100 outline check-blue-500 outline check-blue-800 outline

Check Component

Notes

Basic usage

Radio

Checkbox

Visual variants

check-subtle

check-vivid

check-ghost

check-outline

check-muted

check-tick

Features

check-indeterminate

check-reverse

check-full

check-multiline

Shape modifiers

check-pill (pill)

check-rounded (micro-rounded)

check-square (sharp)

check-fluid (height-proportional)

Sizes

check-4 (16px) ~ check-7 (28px)

check-8 (32px) ~ check-11 (44px)

check-12 (48px) ~ check-15 (60px)

Theme colors

Primary

Secondary

Tertiary

Success

Error

Info

Warning

Caution

Highlight

Shortcut variant colors

check-subtle-*

check-vivid-*

check-ghost-*

check-outline-*

check-muted-*

check-tick-*

Custom colors

check-blue-* custom color

Subtle variant with custom color

Outline variant with custom color