Checks & switches
CheckBoxControl · RadioGroupControl · SwitchControl · RatingControlYes or no, one of several, on or off, and how many stars: the small inputs every form needs.
Overview
CheckBoxControl is a native check box with a classic 13px look and an Indeterminate state for
"some of these". RadioGroupControl<TValue> renders one RadioControl per
RadioGroupItem, shares a name between them so the arrow keys work, and binds the chosen value.
SwitchControl is a check box drawn as a track and thumb. RatingControl is a row of star buttons.
All four bind their value two ways; the radio group also reports to an EditContext.
Examples
#Check boxes with select all
The parent box is checked when every child is, and Indeterminate when only some are. Clicking it sets all three. A disabled box keeps its value and is skipped by Tab.
Example
Razor
C#
Quote includes materials, sales tax, labour.
#Radio group and switches
One value from a list of RadioGroupItems, laid out with Vertical; the third item is disabled. Switches are independent on-off settings with a Label. The line below reads the bound values.
Example
Razor
C#
Delivery
Options
Standard, 5 days; signature required; not insured; tracked.
#Rating
Hover previews a value, a click sets it. ReadOnly shows a value without letting it change; MaxStars sets the count.
Example
Razor
C#
3 stars, good
Average of 38 reviews
Documentation
CheckBoxControl parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
Checked | bool | false | State. Two-way with @bind-Checked. |
CheckedChanged | EventCallback<bool> | — | Fires on the input's change event. |
Indeterminate | bool | false | Draws a dash and sets aria-checked="mixed". Visual only; Checked still decides what a click toggles to. |
Label | string? | null | Text after the box, inside the same <label>. |
Disabled | bool | false | Disables the input and dims the label. |
CssClass | string? | null | Appended to the label; fx-checkbox-theme-blue picks the native look. |
TabIndex | int? | null | Tab order of the input. |
OnMouseDown / OnFocus / OnKeyDown | EventCallback | — | Raw events from the input, for hosts such as grid cells. |
StopClickPropagation / StopMouseDownPropagation / StopKeyDownPropagation | bool | false | Stop those events reaching ancestors. |
PreventKeyDownDefault | bool | false | Cancels the browser's default for key presses on the input. |
(no base class) | | — | This control does not derive from FlexControlBase: no Enabled, Visible, Style or unmatched attributes. |
RadioGroupControl<TValue> parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
Items | IReadOnlyList<RadioGroupItem<TValue>> | empty | One radio per item, in order. |
Value | TValue? | default | Selected item's value. Two-way with @bind-Value; a value that matches no enabled item is ignored. |
ValueChanged | EventCallback<TValue?> | — | Fires when an enabled radio is selected. |
ValueExpression | Expression<Func<TValue>>? | null | Set by @bind-Value; marks the field changed on the cascaded EditContext. |
AriaLabel | string? | null | Accessible name of the group. |
Vertical | bool | false | Stacks the radios in a column. |
Spacing | string | "12px" | Flex gap between radios. |
Enabled (base) | bool | true | false disables every radio. |
Visible (base) | bool | true | false hides the group with display:none. |
CssClass / Style (base) | string? | null | On the group element; Style is appended after the layout styles. |
(unmatched attributes) | Dictionary<string,object> | — | Forwarded to the group <div>. |
RadioGroupItem<TValue> and RadioControl
| Property | Type | Default | Description |
|---|---|---|---|
RadioGroupItem.Value / Text / Disabled | TValue / string / bool | — / — / false | Positional record: new(value, text, disabled). A disabled item renders but cannot be chosen. |
RadioControl (standalone) | | — | Value, SelectedValue (two-way), Name, Label, Disabled, TabIndex, CssClass, ChildContent. Give every button in a group the same Name. |
SwitchControl parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
Checked | bool | false | State. Two-way with @bind-Checked. |
CheckedChanged | EventCallback<bool> | — | Fires on the hidden input's change event. |
Label | string? | null | Text after the track. Takes precedence over child content. |
ChildContent | RenderFragment? | null | Markup label, used when Label is empty. |
Disabled | bool | false | Disables the input and dims the control. The base Enabled is not read. |
CssClass / Style (base) | string? | null | On the <label> host. The base Visible is not applied. |
(unmatched attributes) | Dictionary<string,object> | — | Forwarded to the hidden <input>: aria-label, name, data-*. |
RatingControl parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
Value | int | 0 | Filled stars, 0 to MaxStars. Two-way with @bind-Value. |
ValueChanged | EventCallback<int> | — | Fires when a star is clicked or activated. |
MaxStars | int | 5 | Number of stars. |
ReadOnly | bool | false | Disables the star buttons without dimming them. |
Disabled | bool | false | Disables and dims; also blocks pointer events. The base Enabled is not read. |
CssClass / Style (base) | string? | null | On the fx-rating root. The base Visible is not applied. |
(unmatched attributes) | Dictionary<string,object> | — | Forwarded to the root <div>. |
Methods
| Method | Inputs | Returns | Description |
|---|---|---|---|
CheckBoxControl.FocusAsync() | — | Task | Focuses the input without scrolling. |
CSS classes
| Class | Effect |
|---|---|
fx-checkbox · .fx-checkbox-indeterminate · .fx-checkbox-theme-blue · fx-checkbox-label | Label host; the classic 13px square box, the dash state, the native blue variant, and the text. |
fx-radio-group · fx-radio · fx-radio-label | Flex group; each radio label with a native 16px button; focus draws a dotted outline on the text. |
fx-switch-host · .fx-switch-disabled · fx-switch-input · fx-switch-track · fx-switch-thumb · fx-switch-label | Label host, hidden input, 38×22px track (blue when checked), 18px thumb that slides 16px, and the text. |
fx-rating · .fx-rating-readonly · .fx-rating-disabled · fx-rating-item · .fx-rating-filled / .fx-rating-empty | Row of 20px star buttons; filled stars are amber, empty ones grey; hover scales a star by 15%. |
None of the four stylesheets reads a --fx-* variable. The check box has a second look, fx-checkbox-theme-blue, that switches to the browser's native 16px box with a blue accent.
Keyboard and accessibility
Keyboard
| Key | Action |
|---|---|
Space (check box, switch) | Toggles. Enter does nothing, as on a native check box. |
Tab (radio group) | Enters the group on the selected radio, or the first enabled one. |
Arrow keys (radio group) | Move the selection to the previous or next enabled radio; the browser does this because the radios share a name. |
Tab / Enter / Space (rating) | Tab moves through the stars one by one; Enter or Space selects the focused star. There are no arrow keys. |
- Check box and switch are native
<input type="checkbox">elements inside a<label>, so the label text is their accessible name. The switch hides its input and shows a focus ring on the track. Indeterminatesetsaria-checked="mixed"and draws a dash; the input's own checked value is unchanged.- The radio group is
role="radiogroup"named byAriaLabel; each radio is named by its item text. One radio holds the Tab stop: the selected one, else the first enabled. - The rating stars are buttons without an accessible name or pressed state, and the hover preview is mouse only. Put a visible label beside the control.