Forms

TwCheckbox

TwCheckbox is a Blazor checkbox component. Bind Value or SelectedValues, set Color, Size, Disabled and Horizontal, or generate a group from Items.

Last updated 24 September 2026

Basic Usage

Group checkboxes with TwCheckboxGroup and bind individual values with @bind-Value.

Select your interests

Sports

Music

Reading

Gaming

Razor

<TwCheckboxGroup TValue="string" Legend="Select your interests" Name="interests">
    <TwCheckbox Label="Sports" @bind-Value="sports" Color="Color.Primary" />
    <TwCheckbox Label="Music" @bind-Value="music" Color="Color.Primary" />
    <TwCheckbox Label="Reading" @bind-Value="reading" Color="Color.Primary" />
    <TwCheckbox Label="Gaming" @bind-Value="gaming" Color="Color.Primary" />
</TwCheckboxGroup>

CSHARP

@code {
    private bool sports = true;
    private bool music = false;
    private bool reading = true;
    private bool gaming = false;
}

Sizes

Use Size to render a smaller or larger checkbox. Defaults to Size.Md, the original size.

Small

Medium

Large

Razor

<div class="flex items-center gap-6">
    <TwCheckbox Label="Small" Value="true" Size="Size.Sm" Color="Color.Primary" />
    <TwCheckbox Label="Medium" Value="true" Size="Size.Md" Color="Color.Primary" />
    <TwCheckbox Label="Large" Value="true" Size="Size.Lg" Color="Color.Primary" />
</div>

Indeterminate State

Bind a TwCheckbox<bool?> and pass null to render it indeterminate - useful for a "select all" checkbox that reflects a partially-selected list below it. Clicking an indeterminate checkbox always resolves it to fully checked or unchecked; there's no click gesture that produces the indeterminate state itself.

Select all fruits

Apples

Bananas

Cherries

Razor

<TwCheckbox T="bool?" Label="Select all fruits" Value="selectAllState" ValueChanged="OnSelectAllChanged" Color="Color.Primary" />
<div class="ml-6 mt-2 flex flex-col gap-2">
    <TwCheckbox Label="Apples" @bind-Value="apples" Color="Color.Primary" />
    <TwCheckbox Label="Bananas" @bind-Value="bananas" Color="Color.Primary" />
    <TwCheckbox Label="Cherries" @bind-Value="cherries" Color="Color.Primary" />
</div>

CSHARP

@code {
    private bool apples = true;
    private bool bananas = false;
    private bool cherries = true;
    
    private bool? selectAllState =>
        (apples, bananas, cherries) switch
        {
            (true, true, true) => true,
            (false, false, false) => false,
            _ => null
        };
    
    private void OnSelectAllChanged(bool? value)
    {
        var newValue = value ?? false;
        apples = newValue;
        bananas = newValue;
        cherries = newValue;
    }
}

Colors

Group checkboxes with TwCheckboxGroup and bind individual values with @bind-Value.

Primary

Accent

Success

Danger

Warning

Info

Light

Dark

Razor

@foreach (Color c in ((Color[])Enum.GetValues(typeof(Color))))
{
    @if (c != Color.Light && c != Color.Dark)
    {
        <div class="block mt-2">
            <div class="p-3">
                <TwCheckbox Label="@c.ToString()" Value="true" Color="c" />
            </div>
        </div>
    }
    else
    {
        <div class="block mt-2">
            <div class="@(c == Color.Light ? "bg-gray-900 p-3 rounded-lg" : "bg-white p-3 rounded-lg")">
                <TwCheckbox Label="@c.ToString()" Value="true" Color="c" LabelClass="@(c == Color.Light ? "text-white dark:text-white" : "text-gray-900 dark:text-gray-900")" AriaLabel="@($"{@c.ToString()} checkbox")" />
            </div>
        </div>
    }
}

Data-Driven (Automatic)

Use Items and @bind-SelectedValues to generate checkboxes from a list.

Selected: CSharp, JavaScript

Notification preferences

Email notifications

SMS notifications

Push notifications

Enabled notifications:

Email
Push

Razor

<div class="mb-6">
    <TwCheckboxGroup Legend="Select programming languages"
                     Items="@languageItems"
                     @bind-SelectedValues="selectedLanguages"
                     ItemColor="Color.Accent"
                     Horizontal />
    <p class="mt-4 text-sm text-gray-600 dark:text-white">
        Selected: <strong>@string.Join(", ", selectedLanguages?.Select(l => l.ToString()) ?? Enumerable.Empty<string>())</strong>
    </p>
</div>

<div>
    <TwCheckboxGroup Legend="Notification preferences"
                     Items="@notificationItems"
                     @bind-SelectedValues="selectedNotifications"
                     ItemColor="Color.Accent" />
    <div class="mt-4 p-3 bg-gray-100 dark:bg-gray-800 rounded">
        <p class="text-sm font-medium mb-2">Enabled notifications:</p>
        <ul class="text-sm list-disc list-inside">
            @foreach (var notif in selectedNotifications ?? Enumerable.Empty<string>())
            {
                <li>@notif</li>
            }
        </ul>
    </div>
</div>

CSHARP

@code {
    public enum ProgrammingLanguage
    {
        CSharp,
        JavaScript,
        Python,
        TypeScript,
        Java
    }
    
    private readonly List<CheckboxGroupItem<ProgrammingLanguage>> languageItems = new()
    {
        new() { Label = "C#", Value = ProgrammingLanguage.CSharp, IsSelected = true },
        new() { Label = "JavaScript", Value = ProgrammingLanguage.JavaScript, IsSelected = true },
        new() { Label = "Python", Value = ProgrammingLanguage.Python, IsSelected = false },
        new() { Label = "TypeScript", Value = ProgrammingLanguage.TypeScript, IsSelected = false },
        new() { Label = "Java", Value = ProgrammingLanguage.Java, IsSelected = false }
    };
    private IEnumerable<ProgrammingLanguage>? selectedLanguages = new[] { ProgrammingLanguage.CSharp, ProgrammingLanguage.JavaScript };
    
    private readonly List<CheckboxGroupItem<string>> notificationItems = new()
    {
        new() { Label = "Email notifications", Value = "Email", IsSelected = true },
        new() { Label = "SMS notifications", Value = "SMS", IsSelected = false },
        new() { Label = "Push notifications", Value = "Push", IsSelected = true }
    };
    private IEnumerable<string>? selectedNotifications = new[] { "Email", "Push" };
}

Horizontal Layout & Custom Spacing

Use Horizontal to arrange checkboxes side-by-side, or Spacing="4" for custom spacing.

Days available

Mon

Tue

Wed

Thu

Fri

Terms and Conditions

I agree to the terms of service

I agree to the privacy policy

I want to receive newsletters

Razor

<div class="mb-6">
    <TwCheckboxGroup TValue="string" Legend="Days available" Name="days" Horizontal>
        <TwCheckbox Label="Mon" @bind-Value="monday" Color="Color.Success" />
        <TwCheckbox Label="Tue" @bind-Value="tuesday" Color="Color.Success" />
        <TwCheckbox Label="Wed" @bind-Value="wednesday" Color="Color.Success" />
        <TwCheckbox Label="Thu" @bind-Value="thursday" Color="Color.Success" />
        <TwCheckbox Label="Fri" @bind-Value="friday" Color="Color.Success" />
    </TwCheckboxGroup>
</div>

<TwCheckboxGroup TValue="string" Legend="Terms and Conditions" Name="agreement" Spacing="4">
    <TwCheckbox Label="I agree to the terms of service" @bind-Value="agreeTerms" Color="Color.Primary" />
    <TwCheckbox Label="I agree to the privacy policy" @bind-Value="agreePrivacy" Color="Color.Primary" />
    <TwCheckbox Label="I want to receive newsletters" @bind-Value="agreeNewsletter" Color="Color.Primary" />
</TwCheckboxGroup>

CSHARP

@code {
    private bool monday = true;
    private bool tuesday = true;
    private bool wednesday = false;
    private bool thursday = true;
    private bool friday = true;
    
    private bool agreeTerms = false;
    private bool agreePrivacy = false;
    private bool agreeNewsletter = false;
}

Disabled State

Disable the entire group with the Disabled property.

Premium features (Disabled)

Advanced Analytics

Priority Support

Custom Branding

Razor

<TwCheckboxGroup TValue="string" Legend="Premium features (Disabled)" Name="premium" Disabled>
    <TwCheckbox Label="Advanced Analytics" Value="false" Color="Color.Accent" />
    <TwCheckbox Label="Priority Support" Value="false" Color="Color.Accent" />
    <TwCheckbox Label="Custom Branding" Value="false" Color="Color.Accent" />
</TwCheckboxGroup>

Programmatic Control

Change selections programmatically by updating the bound collection.

Selected:

Razor

<TwCheckboxGroup Legend="Select days"
                 Items="@dayItems"
                 @bind-SelectedValues="selectedDays"
                 ItemColor="Color.Accent"
                 Horizontal />

<div class="flex gap-2 mt-4">
    <TwButton Label="Weekdays" Color="Color.Primary" Variant="ButtonVariant.Outlined" OnClick="@SelectWeekdays" />
    <TwButton Label="Weekend" Color="Color.Success" Variant="ButtonVariant.Outlined" OnClick="@SelectWeekend" />
    <TwButton Label="Clear All" Color="Color.Danger" Variant="ButtonVariant.Outlined" OnClick="@ClearDays" />
</div>

<p class="mt-4 text-sm text-gray-600 dark:text-white">Selected: <strong>@string.Join(", ", selectedDays ?? Enumerable.Empty<DayOfWeek>())</strong></p>

CSHARP

@code {
    private readonly List<CheckboxGroupItem<DayOfWeek>> dayItems = new()
    {
        new() { Label = "Monday", Value = DayOfWeek.Monday, IsSelected = false },
        new() { Label = "Tuesday", Value = DayOfWeek.Tuesday, IsSelected = false },
        new() { Label = "Wednesday", Value = DayOfWeek.Wednesday, IsSelected = false },
        new() { Label = "Thursday", Value = DayOfWeek.Thursday, IsSelected = false },
        new() { Label = "Friday", Value = DayOfWeek.Friday, IsSelected = false },
        new() { Label = "Saturday", Value = DayOfWeek.Saturday, IsSelected = false },
        new() { Label = "Sunday", Value = DayOfWeek.Sunday, IsSelected = false }
    };
    private IEnumerable<DayOfWeek>? selectedDays = Enumerable.Empty<DayOfWeek>();
    
    private void SelectWeekdays()
    {
        selectedDays = new[] { DayOfWeek.Monday, DayOfWeek.Tuesday, DayOfWeek.Wednesday, DayOfWeek.Thursday, DayOfWeek.Friday };
    }
    
    private void SelectWeekend()
    {
        selectedDays = new[] { DayOfWeek.Saturday, DayOfWeek.Sunday };
    }
    
    private void ClearDays()
    {
        selectedDays = Enumerable.Empty<DayOfWeek>();
    }
}

Theme Configuration

Styling is controlled by TwBlazorTheme.Components (a TwCheckboxTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Property	Type	Controls
`Base`	string
`Disabled`	string
`Hover`	string
`LabelBase`	string
`LabelInteractiveCursor`	string
`LabelNonInteractiveCursor`	string
`LabelDisabled`	string
`IconWrapper`	string
`IndeterminateIconWrapper`	string

Global Theme Configuration

These reuse shared design tokens configured once on TwBlazorTheme, rather than being unique to this component.

Property	Type	Controls
`Colors`	TwBlazorPalette

Full reference: TwCheckboxTheme on the API docs.