AstrolUI AstrolUI
Amarillo Naranja Rojo Verde Azul Morado Color propio
Modo claro
Checkbox

Casilla de verificación con el aspecto del tema.

1. Demo AstrolCheckbox

@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 {
 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;
 }
}

2. Dentro de un EditForm

Con @bind-Value dentro de un EditForm, la casilla avisa del cambio a la validación y se marca en rojo si no es válida. Pulse Guardar sin marcarla.

<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; }
 }
}

Parámetros que admite

  • Value (bool), marcada o no; se enlaza con @bind-Value.
  • Text (string) o ChildContent (RenderFragment), texto o contenido junto a la casilla; al pulsarlo también cambia.
  • Indeterminate (bool), estado intermedio (–), p. ej. "seleccionar todo" con solo algunos marcados (por defecto false).
  • Disabled (bool), desactivada (por defecto false).
  • AriaLabel (string), texto accesible cuando no hay texto visible.
  • Id (string) y Class (string); otros atributos (name, title...) se aplican al input.

Es un <input type="checkbox"> nativo: funciona con teclado (Espacio), lectores de pantalla y formularios. AstrolGrid lo usa para seleccionar filas.

Markdown para IA © 2026 AstrolUI v10.0.13