Checkbox, Radio & Switch

These components allow users to select one or more options from a list. FastStrap provides Checkbox for multiple select, Radio for single select, and Switch for toggles.

Bootstrap Reference

Bootstrap 5 Checks & Radios

Quick Start

Live Preview

Subscribe to newsletter

Monthly Plan

Enable Notifications

Checkbox("subscribe", label="Subscribe to newsletter")
Radio("plan", value="monthly", label="Monthly Plan")
Switch("notifications", label="Enable Notifications")

Visual Examples & Use Cases

1. Grouping Radios

Radios share a name attribute to ensure only one can be selected at a time.

Code & Output

Live Preview (Radio Group)

Standard Shipping (Free)

Express Shipping ($10)

Overnight ($25)

Div(
    Radio("shipping", value="standard", label="Standard Shipping (Free)", checked=True),
    Radio("shipping", value="express", label="Express Shipping ($10)"),
    Radio("shipping", value="overnight", label="Overnight ($25)")
)

2. Inline Layout

By default, checks stack vertically. Use inline=True to place them side-by-side.

Code & Output

Live Preview (Inline)

Python

JavaScript

Rust

Div(
    Checkbox("tag", value="python", label="Python", inline=True),
    Checkbox("tag", value="javascript", label="JavaScript", inline=True),
    Checkbox("tag", value="rust", label="Rust", inline=True)
)

3. Switches

A Switch is simply a checkbox with a toggle slider appearance. It has the same API as Checkbox.

Code & Output

Live Preview (Switches)

Wi-Fi

Bluetooth

Airplane Mode

Switch("wifi", label="Wi-Fi", checked=True)
Switch("bluetooth", label="Bluetooth")
Switch("airplane", label="Airplane Mode", disabled=True)

4. Button Style (Toggle Buttons)

You can make checkboxes and radios look like push buttons using btn_style=True.

Code & Output

Live Preview (Toggle Buttons)

List View Grid View

Div(
    Radio("view", value="list", label="List View", btn_style=True, variant="outline-primary", checked=True),
    Radio("view", value="grid", label="Grid View", btn_style=True, variant="outline-primary"),
    cls="btn-group"
)

Parameter Reference (Common)

FastStrap Param	Type	Bootstrap Class	Description
`name`	`str`	`name="..."`	Name for form submission. Radios with same name act as a group.
`value`	`str`	`value="..."`	Value submitted when checked.
`label`	`str`	`<label>`	Text displayed next to the control.
`checked`	`bool`	`checked`	Detailed initial state.
`inline`	`bool`	`.form-check-inline`	Displays control inline.
`reverse`	`bool`	`.form-check-reverse`	Puts label on left, input on right.
`switch`	`bool`	`.form-switch`	(Checkbox only) Renders as toggle switch.
`btn_style`	`bool`	`.btn-check`	Renders as a button instead of a native input.

`faststrap.components.forms.checks.Checkbox(name, *, label=None, value='1', checked=False, disabled=False, required=False, inline=False, reverse=False, checkbox_id=None, size=None, input_cls='', label_cls='', help_text=None, **kwargs)`

Bootstrap Checkbox component.

A styled checkbox form control with optional label.

Parameters:

Name	Type	Description	Default
`name`	`str`	Input name attribute	required
`label`	`str \| None`	Label text for the checkbox	`None`
`value`	`str`	Value when checked (default: "1")	`'1'`
`checked`	`bool`	Whether checkbox is initially checked	`False`
`disabled`	`bool`	Disable the checkbox	`False`
`required`	`bool`	Mark as required field	`False`
`inline`	`bool`	Display inline with other checkboxes	`False`
`reverse`	`bool`	Put checkbox on the right side of label	`False`
`checkbox_id`	`str \| None`	ID for the input (auto-generated from name if not provided)	`None`
`size`	`SizeType \| None`	Control size (sm, lg)	`None`
`input_cls`	`str`	Additional classes for input element	`''`
`label_cls`	`str`	Additional classes for label element	`''`
`help_text`	`str \| None`	Help text displayed below	`None`
`**kwargs`	`Any`	Additional HTML attributes	`{}`

Returns:

Type	Description
`Div`	FastHTML Div element with form-check structure

Example

Basic checkbox:

Checkbox("remember", label="Remember me")

Checked by default:

Checkbox("agree", label="I agree", checked=True, required=True)

Inline checkboxes:

Checkbox("opt1", label="Option 1", inline=True) Checkbox("opt2", label="Option 2", inline=True)

`faststrap.components.forms.checks.Radio(name, *, label=None, value='', checked=False, disabled=False, required=False, inline=False, reverse=False, radio_id=None, input_cls='', label_cls='', **kwargs)`

Bootstrap Radio button component.

A styled radio button form control. Group multiple radios with same name.

Parameters:

Name	Type	Description	Default
`name`	`str`	Input name attribute (same name groups radios together)	required
`label`	`str \| None`	Label text for the radio	`None`
`value`	`str`	Value when selected	`''`
`checked`	`bool`	Whether radio is initially selected	`False`
`disabled`	`bool`	Disable the radio	`False`
`required`	`bool`	Mark as required field	`False`
`inline`	`bool`	Display inline with other radios	`False`
`reverse`	`bool`	Put radio on the right side of label	`False`
`radio_id`	`str \| None`	ID for the input (auto-generated if not provided)	`None`
`input_cls`	`str`	Additional classes for input element	`''`
`label_cls`	`str`	Additional classes for label element	`''`
`**kwargs`	`Any`	Additional HTML attributes	`{}`

Returns:

Type	Description
`Div`	FastHTML Div element with form-check structure

Example

Radio group:

Radio("color", label="Red", value="red", checked=True) Radio("color", label="Blue", value="blue") Radio("color", label="Green", value="green")

Inline radios:

Radio("size", label="Small", value="sm", inline=True) Radio("size", label="Large", value="lg", inline=True)