Checkbox — Marai.UI

Overview

MCheckbox is styled by default. Write <MCheckbox /> and it renders with borders, focus-visible rings, and disabled states already handled. Use Size for scale and Class for custom overrides. Binding and events remain unchanged.

Usage

razor

@using Marai.UI.Components.MCheckbox

Basic Usage

Preview

razor

@using Marai.UI.Components.MCheckbox

<MCheckbox />

Sizes

Use Size to control checkbox dimensions. Defaults to Size.Default.

Preview

Small

Default

Large

razor

@using Marai.UI.Components.MCheckbox
@using Marai.UI.Components.MLabel

<div class="flex flex-col gap-3">
    <div class="flex items-center gap-2">
        <MCheckbox id="small-checkbox" Size="Size.Sm" />
        <MLabel For="small-checkbox" Class="text-xs">Small</MLabel>
    </div>
    <div class="flex items-center gap-2">
        <MCheckbox id="default-checkbox" Size="Size.Default" />
        <MLabel For="default-checkbox" Class="text-sm">Default</MLabel>
    </div>
    <div class="flex items-center gap-2">
        <MCheckbox id="large-checkbox" Size="Size.Lg" />
        <MLabel For="large-checkbox" Class="text-base">Large</MLabel>
    </div>
</div>

Examples

With a Label

Pair with MLabel using a shared id and for for accessible association.

Preview

Accept terms and conditions

razor

@using Marai.UI.Components.MCheckbox
@using Marai.UI.Components.MLabel

<div class="flex items-center gap-2">
    <MCheckbox id="terms" />
    <MLabel For="terms">Accept terms and conditions</MLabel>
</div>

Checked State

Use @bind-Checked for two-way binding to a boolean field.

Preview

Accept merchant agreement

Accepted: True

razor

@using Marai.UI.Components.MCheckbox
@using Marai.UI.Components.MLabel

<div class="flex flex-col gap-3">
    <div class="flex items-center gap-2">
        <MCheckbox @bind-Checked="_accepted" id="agreement" />
        <MLabel For="agreement">Accept merchant agreement</MLabel>
    </div>
    <p class="text-sm text-slate-500">Accepted: @_accepted</p>
</div>

@code {
    private bool _accepted = true;
}

Disabled State

Pass Disabled="true" to set the native disabled attribute. Default styling includes disabled:cursor-not-allowed disabled:opacity-50.

Preview

Disabled unchecked

Disabled checked

razor

@using Marai.UI.Components.MCheckbox
@using Marai.UI.Components.MLabel

<div class="flex flex-col gap-3">
    <div class="flex items-center gap-2">
        <MCheckbox id="disabled-unchecked" Disabled="true" />
        <MLabel For="disabled-unchecked">Disabled unchecked</MLabel>
    </div>
    <div class="flex items-center gap-2">
        <MCheckbox id="disabled-checked" Checked="true" Disabled="true" />
        <MLabel For="disabled-checked">Disabled checked</MLabel>
    </div>
</div>

Safe Tailwind Overrides

The Class parameter is always last — user-supplied classes win all conflicts.

Preview

razor

@using Marai.UI.Components.MCheckbox

<div class="flex items-center gap-4">
    <MCheckbox Class="accent-emerald-600" />
    <MCheckbox Class="rounded-full" />
    <MCheckbox Size="Size.Lg" Class="accent-violet-600" />
</div>

Standard HTML Attributes

Preview

Subscribe to newsletter

razor

<div class="flex items-center gap-2">
    <MCheckbox id="newsletter" name="newsletter" aria-describedby="newsletter-hint" Class="h-4 w-4 rounded border border-gray-300 accent-blue-600 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2" />
    <MLabel For="newsletter">Subscribe to newsletter</MLabel>
</div>
<p id="newsletter-hint" class="text-sm text-muted-foreground">You can unsubscribe at any time.</p>

Accessibility

Renders a native <input type="checkbox"> — fully keyboard accessible out of the box
Focus-visible ring is built in — keyboard navigation is visible by default
Always associate a visible label using MLabel with matching id and For attributes
Use aria-label when a visible label is not present
Use aria-describedby to link help text or error messages to the checkbox

API Reference

Parameter	Type	Default	Description
Size	Size	`Size.Default`	Checkbox dimensions (`Sm`, `Default`, `Lg`).
Checked	bool	`false`	The current checked state. Use with `@bind-Checked` for two-way binding.
CheckedChanged	EventCallback<bool>	—	Callback invoked when the checked state changes. Wired automatically by `@bind-Checked`.
CheckedExpression	Expression<Func<bool>>?	`null`	Expression for `<ValidationMessage>`. Set automatically by `@bind-Checked`.
Disabled	bool	`false`	Sets the native `disabled` attribute.
Class	string?	`null`	Additional Tailwind classes. User-supplied classes win all conflicts.
AdditionalAttributes	Dictionary<string, object>?	`null`	Arbitrary HTML attributes forwarded to the `<input>` element.