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

Examples:

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)

See Also

Bootstrap docs: https://getbootstrap.com/docs/5.3/forms/checks-radios/

`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

Examples:

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)

See Also

Bootstrap docs: https://getbootstrap.com/docs/5.3/forms/checks-radios/

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

Bootstrap Switch (toggle) component.

A toggle switch styled as an alternative to checkboxes.

Parameters:

Name	Type	Description	Default
`name`	`str`	Input name attribute	required
`label`	`str \| None`	Label text for the switch	`None`
`value`	`str`	Value when checked (default: "1")	`'1'`
`checked`	`bool`	Whether switch is initially on	`False`
`disabled`	`bool`	Disable the switch	`False`
`required`	`bool`	Mark as required field	`False`
`reverse`	`bool`	Put switch on the right side of label	`False`
`switch_id`	`str \| None`	ID for the input (auto-generated from name 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 form-switch structure

Examples:

Basic switch:

>>> Switch("notifications", label="Enable notifications")

Pre-toggled:

>>> Switch("darkmode", label="Dark mode", checked=True)

See Also

Bootstrap docs: https://getbootstrap.com/docs/5.3/forms/checks-radios/#switches

`faststrap.components.forms.checks.Range(name, *, label=None, value=None, min_val=0, max_val=100, step=None, disabled=False, range_id=None, input_cls='', label_cls='', **kwargs)`

Bootstrap Range (slider) component.

A styled range slider input control.

Parameters:

Name	Type	Description	Default
`name`	`str`	Input name attribute	required
`label`	`str \| None`	Label text for the range	`None`
`value`	`int \| float \| None`	Initial value	`None`
`min_val`	`int \| float`	Minimum value (default: 0)	`0`
`max_val`	`int \| float`	Maximum value (default: 100)	`100`
`step`	`int \| float \| None`	Step increment (default: 1)	`None`
`disabled`	`bool`	Disable the range	`False`
`range_id`	`str \| None`	ID for the input (auto-generated from name 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-range structure

Examples:

Basic range:

>>> Range("volume", label="Volume", value=50)

With custom range:

>>> Range("price", label="Price", min_val=10, max_val=500, step=10)

See Also

Bootstrap docs: https://getbootstrap.com/docs/5.3/forms/range/

`faststrap.components.forms.button.CloseButton(*children, white=False, aria_label='Close', **kwargs)`

Bootstrap close button helper.

This is used by components like Alerts, Modals, and Drawers.

Parameters:

Name	Type	Description	Default
`*children`	`Any`	Optional children. Bootstrap typically uses an empty button.	`()`
`white`	`bool`	Use white close icon variant (useful on dark backgrounds)	`False`
`aria_label`	`str`	Accessible label	`'Close'`
`**kwargs`	`Any`	Additional HTML attributes (cls, data-, hx-, etc.)	`{}`

Returns:

Type	Description
`Button`	FastHTML Button element