Checkbox

The default Checkbox style with two-way binding via @bind-Checked. Pair with a Label component using matching Id and For attributes so clicking the label toggles the checkbox.

A Checkbox paired with a Label and a secondary description paragraph. This layout is ideal for consent forms where additional context is needed below the label, such as explaining terms of service.

Set Indeterminate to true to display a dash icon instead of a checkmark. This state is typically used for "select all" checkboxes when only some child items are selected. The aria-checked attribute is automatically set to mixed for screen readers.

Set Disabled to true to prevent interaction. Disabled checkboxes have reduced opacity, cannot be clicked or focused, and set aria-disabled for screen readers. Both checked and unchecked states are shown here.

Use the Class parameter to apply custom Tailwind CSS classes for project-specific styles. You can change the border color, background, focus ring, or size to match your design system without creating a new component.

Style checkboxes as selectable cards by wrapping each option in a bordered container with peer and peer-data-[state=checked]: modifiers. The card border and background shift when checked, giving a clear visual indication of selected items.

A group of related Checkbox components, each with its own @bind-Checked binding. Use separate boolean fields to track individual selections for scenarios like notification preferences or feature toggles.

A real-world settings card pattern combining multiple Checkbox components inside a Card with section headers. This layout is common for preference pages and notification settings where users manage multiple boolean options.