Checks & radios

Checkbox, switch, radio, and radio-group helpers compose labels, inputs, disabled states, and validation feedback.

Approach

bs-check, bs-switch, and bs-radio render Bootstrap form-check structures while capturing bs-input, bs-label, and validation content. Put disabled state on the outer helper so it can apply the state to the generated input.

When a specialized state is not exposed as a first-class property, use normal HTML attributes on the captured bs-input.

Checks

Checks use checkbox semantics and Bootstrap form-check styling. Put common checked and disabled states on the outer helper unless the sample is demonstrating explicit inner input behavior.

aspnet 

<bs-check bottom-margin="Default2">
    <bs-input />
    <bs-label>Default checkbox</bs-label>
</bs-check>
<bs-check input-checked="true" bottom-margin="Default2">
    <bs-label>Checked checkbox</bs-label>
</bs-check>
<bs-check disabled="true">
    <bs-input />
    <bs-label>Disabled checkbox</bs-label>
</bs-check>

Disabled

Disabled checks and radios are visually muted and cannot be changed. Put disabled state on the outer helper when the whole composed control should be unavailable.

aspnet 

<bs-check disabled="true" bottom-margin="Default2">
    <bs-input />
    <bs-label>Disabled checkbox</bs-label>
</bs-check>
<bs-check input-checked="true" disabled="true">
    <bs-label>Disabled checked checkbox</bs-label>
</bs-check>

Indeterminate

Use is-mixed-check-state when a checkbox should render with the browser's indeterminate state. The helper sets the typed ARIA state when it has not been explicitly assigned and captures the runtime initializer for the DOM property.

aspnet 

<bs-check>
    <bs-input id="docsIndeterminateCheck" is-mixed-check-state="true" />
    <bs-label>Indeterminate checkbox</bs-label>
</bs-check>

Inline checks

Set inline="true" when multiple checks should appear on the same line.

aspnet 

<bs-check inline="true">
    <bs-label>One</bs-label>
</bs-check>
<bs-check inline="true">
    <bs-label>Two</bs-label>
</bs-check>
<bs-check inline="true" disabled="true">
    <bs-label>Three disabled</bs-label>
</bs-check>

Switches

Switches retain checkbox semantics while using Bootstrap's switch styling. Use them for binary settings where on/off presentation is clearer than a standard checkbox.

aspnet 

<bs-switch bottom-margin="Default2">
    <bs-label>Default switch checkbox input</bs-label>
</bs-switch>
<bs-switch input-checked="true" bottom-margin="Default2">
    <bs-label>Checked switch checkbox input</bs-label>
</bs-switch>
<bs-switch disabled="true">
    <bs-label>Disabled switch checkbox input</bs-label>
</bs-switch>
<bs-switch input-checked="true" disabled="true" top-margin="Default2">
    <bs-label>Disabled checked switch checkbox input</bs-label>
</bs-switch>

Native switches

bs-switch is the BCL-native switch helper. It uses checkbox semantics with Bootstrap switch styling.

aspnet 

<bs-switch bottom-margin="Default2">
    <bs-label>Default switch</bs-label>
</bs-switch>
<bs-switch disabled="true">
    <bs-label>Disabled switch</bs-label>
</bs-switch>
<bs-switch input-checked="true" disabled="true" top-margin="Default2">
    <bs-label>Disabled checked switch</bs-label>
</bs-switch>

Radios

Use radios for mutually exclusive choices. A radio group keeps the options associated with a shared legend and name.

Contact preference
aspnet 

<bs-radio-group input-name="contactPreference">
    <bs-legend>Contact preference</bs-legend>
    <bs-radio value="Email">
        <bs-label>Email</bs-label>
    </bs-radio>
    <bs-radio input-checked="true" value="Phone">
        <bs-label>Phone</bs-label>
    </bs-radio>
    <bs-radio value="Mail" disabled="true">
        <bs-label>Mail</bs-label>
    </bs-radio>
</bs-radio-group>

Disabled

aspnet 

<bs-radio disabled="true" value="disabled-radio" bottom-margin="Default2">
    <bs-label>Disabled radio</bs-label>
</bs-radio>
<bs-radio input-checked="true" disabled="true" value="disabled-checked-radio">
    <bs-label>Disabled checked radio</bs-label>
</bs-radio>

Default (stacked)

aspnet 

<bs-check bottom-margin="Default2">
    <bs-input />
    <bs-label>Default checkbox</bs-label>
</bs-check>
<bs-radio value="stacked-radio">
    <bs-label>Default radio</bs-label>
</bs-radio>

Inline

aspnet 

<bs-check inline="true">
    <bs-input />
    <bs-label id="inlineCheckbox1">One</bs-label>
</bs-check>
<bs-check inline="true">
    <bs-input />
    <bs-label id="inlineCheckbox2">Two</bs-label>
</bs-check>
<bs-check inline="true">
    <bs-input />
    <bs-label id="inlineCheckbox3">Three</bs-label>
</bs-check>
aspnet 

<bs-radio input-name="inlineRadios" inline="true" value="1">
    <bs-label id="inlineRadio1">One</bs-label>
</bs-radio>
<bs-radio input-checked="true" input-name="inlineRadios" inline="true" value="2">
    <bs-label>Two</bs-label>
</bs-radio>
<bs-radio input-name="inlineRadios" inline="true" value="3" disabled="true">
    <bs-label id="inlineRadio3">Three disabled</bs-label>
</bs-radio>

Reverse

Reverse checks place the control on the opposite side of the label. Use reverse on bs-check or bs-radio to render the Bootstrap reverse layout.

aspnet 

<bs-check reverse="true" bottom-margin="Default2">
    <bs-input />
    <bs-label>Reverse checkbox</bs-label>
</bs-check>
<bs-radio reverse="true" value="reverse" bottom-margin="Default2">
    <bs-label>Reverse radio</bs-label>
</bs-radio>
<bs-switch reverse="true">
    <bs-label>Reverse switch checkbox input</bs-label>
</bs-switch>

Without labels

Controls without visible labels still need an accessible name, such as aria-label, so assistive technology can identify the input.

aspnet 

<bs-check>
    <bs-input aria-label="Checkbox without visible label" />
</bs-check>

Checkbox toggle buttons

Checkbox toggle buttons use a checkbox input behind a button-styled label. Use btn-style when the control should carry a contextual button color.

aspnet 

<bs-button-toggle id="btn-check" btn-style="Primary">Single toggle</bs-button-toggle>
<bs-button-toggle id="btn-check-checked" checked="true" btn-style="Primary">Checked</bs-button-toggle>
<bs-button-toggle id="btn-check-disabled" disabled="true" btn-style="Primary">Disabled</bs-button-toggle>
aspnet 

<bs-button-toggle id="btn-check-base">Single toggle</bs-button-toggle>
<bs-button-toggle id="btn-check-base-checked" checked="true">Checked</bs-button-toggle>
<bs-button-toggle id="btn-check-base-disabled" disabled="true">Disabled</bs-button-toggle>

Radio toggle buttons

Radio toggle buttons share a name and use radio input semantics behind button-styled labels.

aspnet 

<bs-button-toggle id="btn-radio1" mode="Radio" name="btnradio" checked="true" btn-style="Secondary">Checked</bs-button-toggle>
<bs-button-toggle id="btn-radio2" mode="Radio" name="btnradio" btn-style="Secondary">Radio</bs-button-toggle>
<bs-button-toggle id="btn-radio3" mode="Radio" name="btnradio" disabled="true" btn-style="Secondary">Disabled</bs-button-toggle>
<bs-button-toggle id="btn-radio4" mode="Radio" name="btnradio" btn-style="Secondary">Radio</bs-button-toggle>
aspnet 

<bs-button-toggle id="btn-radio-base1" mode="Radio" name="btnradiobase" checked="true">Checked</bs-button-toggle>
<bs-button-toggle id="btn-radio-base2" mode="Radio" name="btnradiobase">Radio</bs-button-toggle>
<bs-button-toggle id="btn-radio-base3" mode="Radio" name="btnradiobase" disabled="true">Disabled</bs-button-toggle>
<bs-button-toggle id="btn-radio-base4" mode="Radio" name="btnradiobase">Radio</bs-button-toggle>

Outlined styles

Outlined toggle styles use the same checked, disabled, and radio grouping semantics with lower visual weight.

aspnet 

<bs-div display="Flex" flex-wrap="Wrap" gap="Default2">
    <bs-button-toggle id="btn-check-outlined" btn-style="Primary" outline="true">Single toggle</bs-button-toggle>
    <bs-button-toggle id="btn-check-outlined-checked" checked="true" btn-style="Secondary" outline="true">Checked</bs-button-toggle>
    <bs-button-toggle id="success-outlined" mode="Radio" name="options-outlined" checked="true" btn-style="Success" outline="true">Checked success radio</bs-button-toggle>
    <bs-button-toggle id="danger-outlined" mode="Radio" name="options-outlined" btn-style="Danger" outline="true">Danger radio</bs-button-toggle>
</bs-div>