# Checkbox

> AstrolCheckbox: Blazor checkbox on top of the native input, with @bind-Value, intermediate state, disabled state and EditForm validation.

Source page: https://doc.astrolui.com/form/checkbox

Checkbox with the theme look.

## 1. Demo AstrolCheckbox

```razor
@using Astrol.Component.Basic.Form

<AstrolCheckbox @bind-Value="remember" Text="Remember me" />
<AstrolCheckbox @bind-Value="news">I want to receive the <b>newsletter</b></AstrolCheckbox>
<AstrolCheckbox Value="true" Disabled="true" Text="Disabled" />

@* Select all: intermediate state (–) when only some are checked *@
<AstrolCheckbox Value="@allSelected" Indeterminate="@someSelected" ValueChanged="SelectAll" Text="All" />
@foreach (var key in items.Keys.ToList())
{
    var name = key;
    <AstrolCheckbox Value="@items[name]" ValueChanged="v => items[name] = v" Text="@name" />
}
@code {
```

```csharp
    private bool remember = true;
    private bool news;
    private readonly Dictionary<string, bool> items = new() { ["A"] = true, ["B"] = false, ["C"] = false };
    private bool allSelected => items.Values.All(v => v);
    private bool someSelected => items.Values.Any(v => v) && !allSelected;

    private void SelectAll(bool value)
    {
        foreach (var key in items.Keys.ToList()) items[key] = value;
    }
}
```

I want to receive the **newsletter**

## 2. Inside an EditForm

With **@bind-Value** inside an **EditForm**, the checkbox notifies validation of the change and turns red if it is invalid. Press Save without checking it.

```razor
<EditForm Model="terms" OnValidSubmit="Accept">
    <DataAnnotationsValidator />
    <AstrolCheckbox @bind-Value="terms.Accepted" Text="I accept the terms" />
    <ValidationMessage For="() => terms.Accepted" />
    <AstrolButton Type="ButtonType.Submit" Text="Save" />
</EditForm>

@code {
    private TermsModel terms = new();

    private sealed class TermsModel
    {
        [Range(typeof(bool), "true", "true", ErrorMessage = "Accept the terms to continue.")]
        public bool Accepted { get; set; }
    }
}
```

### Supported parameters

- Value **(bool)**, checked or not; binds with **@bind-Value**.
- Text **(string)** or ChildContent **(RenderFragment)**, text or content next to the box; clicking it also toggles.
- Indeterminate **(bool)**, intermediate state (–), e.g. "select all" with only some checked (default **false**).
- Disabled **(bool)**, disabled (default **false**).
- AriaLabel **(string)**, accessible text when there is no visible text.
- Id **(string)** and Class **(string)**; other attributes (**name**, **title**...) go to the input.

It is a native **<input type="checkbox">**: it works with the keyboard (Space), screen readers and forms. AstrolGrid uses it to select rows.