Checkbox
Capture boolean input from user
<sa-field orientation="FieldOrientation.Horizontal">
<sa-input id="intro-terms" type="checkbox" checked/>
<sa-field-content>
<sa-field-label for="intro-terms">Accept terms and conditions</sa-field-label>
<sa-field-description>
By clicking this checkbox, you agree to the terms and conditions.
</sa-field-description>
</sa-field-content>
</sa-field>Usage
Use <sa-input> with the type attribute specified as checkbox to display a checkbox to the user. The type can be specified either explicitly or inferred from the underlying data type (i.e. a bool) or data annotations when using model binding.
<sa-input type="checkbox"/>Examples
Model binding
Supports ASP.NET Core model binding via asp-for. When you bind a <sa-input> to a model with a bool data type, StellarAdmin will render a checkbox. StellarAdmin will automatically wrap the input inside a Field with the correct label, description, and placeholder text derived from data attributes. You can opt out of the field wrapping by setting the render-field attribute to false.
<sa-input asp-for="AcceptTerms"/>Model binding validation
When using model binding, validation errors from the Model state are displayed correctly.
<sa-input asp-for="AcceptTerms"/>With field
If you are not using model binding, you can use the various Field Tag Helpers to wrap your input inside a field.
<sa-field orientation="FieldOrientation.Horizontal">
<sa-input id="intro-terms" type="checkbox" checked/>
<sa-field-content>
<sa-field-label for="intro-terms">Accept terms and conditions</sa-field-label>
<sa-field-description>
By clicking this checkbox, you agree to the terms and conditions.
</sa-field-description>
</sa-field-content>
</sa-field>Implicit field
You can also implicitly wrap the input inside a Field using the shorthand syntax and setting the label and description attributes.
<sa-input
label="Accept terms and conditions"
description="By clicking this checkbox, you agree to the terms and conditions."
id="intro-terms" type="checkbox" checked/>Manual validation
If you're not using ASP.NET Core model binding, you can manually indicate validation errors by setting the aria-invalid attribute to true. This will display a red border around the input. The error message can be displayed using either a <sa-field-error> Tag Helper (when using explicit fields) or the error attribute (when using implicit fields).
<sa-field orientation="FieldOrientation.Horizontal">
<sa-input id="intro-terms" type="checkbox" aria-invalid="true"/>
<sa-field-content>
<sa-field-label for="intro-terms">Accept terms and conditions</sa-field-label>
<sa-field-description>
By clicking this checkbox, you agree to the terms and conditions.
</sa-field-description>
<sa-field-error>
You must accept the terms and conditions
</sa-field-error>
</sa-field-content>
</sa-field>Disabled
Add the disabled attribute to prevent user interaction.
<sa-field orientation="FieldOrientation.Horizontal">
<sa-input id="intro-terms" type="checkbox" disabled checked/>
<sa-field-content>
<sa-field-label for="intro-terms">Accept terms and conditions</sa-field-label>
<sa-field-description>
By clicking this checkbox, you agree to the terms and conditions.
</sa-field-description>
</sa-field-content>
</sa-field>Group
Group related checkboxes using <sa-field-set> and <sa-field-group>.
<sa-field-set>
<sa-field-label>Show on the destination map:</sa-field-label>
<sa-field-group data-slot="checkbox-group" class="[&_[data-slot=field-label]]:font-normal">
<sa-field orientation="FieldOrientation.Horizontal">
<sa-input type="checkbox" id="landmarks" checked/>
<sa-field-label for="landmarks">
Landmark & Attractions
</sa-field-label>
</sa-field>
<sa-field orientation="FieldOrientation.Horizontal">
<sa-input type="checkbox" id="restaurants" checked/>
<sa-field-label for="restaurants">
Restaurants & Bars
</sa-field-label>
</sa-field>
<sa-field orientation="FieldOrientation.Horizontal">
<sa-input type="checkbox" id="stations"/>
<sa-field-label for="stations">
Transit Stations
</sa-field-label>
</sa-field>
<sa-field orientation="FieldOrientation.Horizontal">
<sa-input type="checkbox" id="tour-guides"/>
<sa-field-label for="tour-guides">
Local Tour Guides
</sa-field-label>
</sa-field>
</sa-field-group>
</sa-field-set>Choice cards
Wrap each option's <sa-field> inside its <sa-field-label> to turn the whole field into a clickable card. Because the label wraps the field, clicking anywhere on the card toggles the checkbox, checked cards are highlighted, and keyboard focus outlines the card rather than the checkbox itself. Use <sa-field-title> for the option title, since the field label is now the wrapping element.
<sa-field-set class="w-full max-w-md">
<sa-field-legend>Trip Add-ons</sa-field-legend>
<sa-field-description>
Enhance your trip with optional extras.
</sa-field-description>
<sa-field-group data-slot="checkbox-group">
<sa-field-label for="addon-insurance">
<sa-field orientation="FieldOrientation.Horizontal">
<sa-field-content>
<sa-field-title>Travel Insurance</sa-field-title>
<sa-field-description>
Covers cancellations, medical costs, and lost luggage
</sa-field-description>
</sa-field-content>
<sa-input type="checkbox" name="addons" value="insurance" id="addon-insurance" checked/>
</sa-field>
</sa-field-label>
<sa-field-label for="addon-transfer">
<sa-field orientation="FieldOrientation.Horizontal">
<sa-field-content>
<sa-field-title>Airport Transfer</sa-field-title>
<sa-field-description>
Private pickup from the airport to your hotel
</sa-field-description>
</sa-field-content>
<sa-input type="checkbox" name="addons" value="transfer" id="addon-transfer"/>
</sa-field>
</sa-field-label>
<sa-field-label for="addon-excursions">
<sa-field orientation="FieldOrientation.Horizontal">
<sa-field-content>
<sa-field-title>Guided Excursions</sa-field-title>
<sa-field-description>
Local guided tours at your destination
</sa-field-description>
</sa-field-content>
<sa-input type="checkbox" name="addons" value="excursions" id="addon-excursions"/>
</sa-field>
</sa-field-label>
</sa-field-group>
</sa-field-set>Accessibility
A checkbox renders a native <input type="checkbox">, so it is focused with Tab, toggled with Space and announced with its checked state. The visible indicator is decorative. With asp-for or the label attribute the label is wired to the input for you.
Group related checkboxes in an <sa-field-set> with an <sa-field-legend> so the group has a name. Set aria-invalid="true" on a checkbox that is not model bound to expose its error state.
Part classes
Pass an InputClassNames instance from the StellarAdmin.TagHelpers namespace to <sa-input> using class-names. Each property accepts an optional string of space-separated CSS classes, which are added to the part's existing classes.
@{
var partClasses = new InputClassNames
{
Root = "travel-field",
Label = "travel-label",
Description = "travel-help",
Control = "travel-checkbox-control",
};
}
<sa-input type="checkbox" id="classes-flexible" label="Flexible dates" description="Find fares around your selected dates." checked class-names="@partClasses" />| Property | Target |
|---|---|
Root | The generated field wrapper, when the input renders an implicit field. |
Label | The generated field label, when rendered. |
Description | The generated help text, when rendered. |
Error | The generated validation message element, when rendered. |
Content | The generated container around the label and supporting text in a horizontal implicit field. |
Control | The container around the checkbox input and its indicator. |
Root, Label, Description, Error, and Content are inherited from FieldClassNames. They only style generated field elements; with render-field="false", apply class directly to any field elements you compose yourself. The control-specific parts still apply. See Field part classes for the shared behavior and a styled example.
API Reference
<sa-input>
<sa-input with type="checkbox", renders a checkbox. The type can also be inferred from a bound bool model property.
Prop
Type