Checkbox

Binary toggle with indeterminate state, model binding, and size variants.

<rhx-checkbox>

Examples

Basic

I agree to the terms and conditions

<rhx-checkbox name="agree"
               rhx-label="I agree to the terms and conditions" />

Pre-checked

Subscribe to newsletter

<rhx-checkbox name="newsletter"
               rhx-label="Subscribe to newsletter"
               rhx-checked="true" />

With Hint

Receive marketing emailsWe'll only send relevant updates

<rhx-checkbox name="marketing"
               rhx-label="Receive marketing emails"
               rhx-hint="We'll only send relevant updates" />

Indeterminate

Select all items

<rhx-checkbox name="select-all"
               rhx-label="Select all items"
               rhx-indeterminate="true" />

Sizes

Small checkbox

Medium checkbox (default)

Large checkbox

<rhx-checkbox name="cb-sm" rhx-label="Small checkbox" rhx-size="small" />
<rhx-checkbox name="cb-md" rhx-label="Medium checkbox (default)" />
<rhx-checkbox name="cb-lg" rhx-label="Large checkbox" rhx-size="large" />

States

Disabled checkbox

Disabled checked

<rhx-checkbox name="cb-dis" rhx-label="Disabled checkbox"
               rhx-disabled="true" />
<rhx-checkbox name="cb-dis-checked" rhx-label="Disabled checked"
               rhx-disabled="true" rhx-checked="true" />

Model Binding

Agree to Terms

<rhx-checkbox rhx-for="AgreeToTerms"
               rhx-label="Agree to Terms" />

htmx Integration

Subscribe to marketing emailsWe'll send you product news and updates

Toggle the checkbox...

<rhx-checkbox name="marketingEmails"
               rhx-label="Subscribe to marketing emails"
               rhx-hint="We'll send you product news and updates"
               hx-post="/Docs/Components/Checkbox?handler=UpdatePreference"
               hx-trigger="change"
               hx-target="#checkbox-result"
               hx-include="this" />
<div id="checkbox-result">Toggle the checkbox...</div>

Properties

Property	Type	Default	Description
`rhx-for`	`ModelExpression`	`-`	ASP.NET Core model expression for two-way binding
`name`	`string`	`-`	The form field name
`rhx-label`	`string`	`-`	Label text displayed next to the checkbox
`rhx-hint`	`string`	`-`	Hint text displayed below the label
`rhx-checked`	`bool`	`false`	Whether the checkbox is checked
`rhx-indeterminate`	`bool`	`false`	Shows an indeterminate (mixed) state
`rhx-size`	`string`	`medium`	Checkbox size: small, medium, large
`rhx-disabled`	`bool`	`false`	Whether the checkbox is disabled