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, Switch for toggles, and Range for slider inputs.

Quick Start

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

Usage Scenarios

Grouping Radios

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)")
)

Inline Layout

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)
)

Switches

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

Button Style (Toggle Buttons)

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"
)

Range Slider

Range("volume", label="Volume", value=50)
Range("price", label="Price", min_val=10, max_val=500, step=10)

Parameter Reference

Checkbox

Parameter	Type	Default	Description
name	str	Required	Input name attribute
label	str \| None	None	Label text
value	str	"1"	Value when checked
checked	bool	False	Whether initially checked
disabled	bool	False	Disable the checkbox
required	bool	False	Mark as required
inline	bool	False	Display inline
reverse	bool	False	Put checkbox on right side of label
checkbox_id	str \| None	None	ID for the input
size	str \| None	None	Control size (sm, lg)
input_cls	str	""	Additional classes for input
label_cls	str	""	Additional classes for label
help_text	str \| None	None	Help text below input

Radio

Parameter	Type	Default	Description
name	str	Required	Input name attribute (same name groups radios)
label	str \| None	None	Label text
value	str	""	Value when selected
checked	bool	False	Whether initially selected
disabled	bool	False	Disable the radio
required	bool	False	Mark as required
inline	bool	False	Display inline
reverse	bool	False	Put radio on right side of label
radio_id	str \| None	None	ID for the input
input_cls	str	""	Additional classes for input
label_cls	str	""	Additional classes for label

Switch

Parameter	Type	Default	Description
name	str	Required	Input name attribute
label	str \| None	None	Label text
value	str	"1"	Value when checked
checked	bool	False	Whether initially on
disabled	bool	False	Disable the switch
required	bool	False	Mark as required
reverse	bool	False	Put switch on right side of label
switch_id	str \| None	None	ID for the input
input_cls	str	""	Additional classes for input
label_cls	str	""	Additional classes for label

Range

Parameter	Type	Default	Description
name	str	Required	Input name attribute
label	str \| None	None	Label text
value	int \| float \| None	None	Initial value
min_val	int \| float	0	Minimum value
max_val	int \| float	100	Maximum value
step	int \| float \| None	None	Step increment
disabled	bool	False	Disable the range
range_id	str \| None	None	ID for the input
input_cls	str	""	Additional classes for input
label_cls	str	""	Additional classes for label

Accessibility

• Labels are associated with inputs via for and id attributes.
• Required fields use the required attribute.
• Switch inputs include role="switch" for proper screen reader semantics.

API Reference

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/

Source code in src/faststrap/components/forms/checks.py

@register(category="forms")
def Checkbox(
    name: str,
    *,
    label: str | None = None,
    value: str = "1",
    checked: bool = False,
    disabled: bool = False,
    required: bool = False,
    inline: bool = False,
    reverse: bool = False,
    checkbox_id: str | None = None,
    size: SizeType | None = None,
    input_cls: str = "",
    label_cls: str = "",
    help_text: str | None = None,
    **kwargs: Any,
) -> Div:
    """Bootstrap Checkbox component.

    A styled checkbox form control with optional label.

    Args:
        name: Input name attribute
        label: Label text for the checkbox
        value: Value when checked (default: "1")
        checked: Whether checkbox is initially checked
        disabled: Disable the checkbox
        required: Mark as required field
        inline: Display inline with other checkboxes
        reverse: Put checkbox on the right side of label
        checkbox_id: ID for the input (auto-generated from name if not provided)
        size: Control size (sm, lg)
        input_cls: Additional classes for input element
        label_cls: Additional classes for label element
        help_text: Help text displayed below
        **kwargs: Additional HTML attributes

    Returns:
        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/
    """
    cb_id = checkbox_id or f"checkbox-{name}"

    # Wrapper classes
    wrapper_classes = ["form-check"]
    if inline:
        wrapper_classes.append("form-check-inline")
    if reverse:
        wrapper_classes.append("form-check-reverse")

    user_cls = kwargs.pop("cls", "")
    wrapper_cls = merge_classes(" ".join(wrapper_classes), user_cls)

    # Input classes
    input_classes = ["form-check-input"]
    if size:
        input_classes.append(f"form-check-input-{size}")
    all_input_cls = merge_classes(" ".join(input_classes), input_cls)

    # Input attributes
    input_attrs: dict[str, Any] = {
        "type": "checkbox",
        "cls": all_input_cls,
        "name": name,
        "value": value,
        "id": cb_id,
    }

    if checked:
        input_attrs["checked"] = True
    if disabled:
        input_attrs["disabled"] = True
    if required:
        input_attrs["required"] = True

    input_attrs.update(convert_attrs(kwargs))

    # Build elements
    elements = [FTInput(**input_attrs)]

    if label:
        label_cls_final = merge_classes("form-check-label", label_cls)
        elements.append(Label(label, cls=label_cls_final, fr=cb_id))

    if help_text:
        elements.append(Div(help_text, cls="form-text"))

    return Div(*elements, cls=wrapper_cls)

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/

Source code in src/faststrap/components/forms/checks.py

@register(category="forms")
def Radio(
    name: str,
    *,
    label: str | None = None,
    value: str = "",
    checked: bool = False,
    disabled: bool = False,
    required: bool = False,
    inline: bool = False,
    reverse: bool = False,
    radio_id: str | None = None,
    input_cls: str = "",
    label_cls: str = "",
    **kwargs: Any,
) -> Div:
    """Bootstrap Radio button component.

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

    Args:
        name: Input name attribute (same name groups radios together)
        label: Label text for the radio
        value: Value when selected
        checked: Whether radio is initially selected
        disabled: Disable the radio
        required: Mark as required field
        inline: Display inline with other radios
        reverse: Put radio on the right side of label
        radio_id: ID for the input (auto-generated if not provided)
        input_cls: Additional classes for input element
        label_cls: Additional classes for label element
        **kwargs: Additional HTML attributes

    Returns:
        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/
    """
    r_id = radio_id or f"radio-{name}-{value}"

    # Wrapper classes
    wrapper_classes = ["form-check"]
    if inline:
        wrapper_classes.append("form-check-inline")
    if reverse:
        wrapper_classes.append("form-check-reverse")

    user_cls = kwargs.pop("cls", "")
    wrapper_cls = merge_classes(" ".join(wrapper_classes), user_cls)

    # Input classes
    all_input_cls = merge_classes("form-check-input", input_cls)

    # Input attributes
    input_attrs: dict[str, Any] = {
        "type": "radio",
        "cls": all_input_cls,
        "name": name,
        "value": value,
        "id": r_id,
    }

    if checked:
        input_attrs["checked"] = True
    if disabled:
        input_attrs["disabled"] = True
    if required:
        input_attrs["required"] = True

    input_attrs.update(convert_attrs(kwargs))

    # Build elements
    elements = [FTInput(**input_attrs)]

    if label:
        label_cls_final = merge_classes("form-check-label", label_cls)
        elements.append(Label(label, cls=label_cls_final, fr=r_id))

    return Div(*elements, cls=wrapper_cls)

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

Source code in src/faststrap/components/forms/checks.py

@register(category="forms")
def Switch(
    name: str,
    *,
    label: str | None = None,
    value: str = "1",
    checked: bool = False,
    disabled: bool = False,
    required: bool = False,
    reverse: bool = False,
    switch_id: str | None = None,
    input_cls: str = "",
    label_cls: str = "",
    **kwargs: Any,
) -> Div:
    """Bootstrap Switch (toggle) component.

    A toggle switch styled as an alternative to checkboxes.

    Args:
        name: Input name attribute
        label: Label text for the switch
        value: Value when checked (default: "1")
        checked: Whether switch is initially on
        disabled: Disable the switch
        required: Mark as required field
        reverse: Put switch on the right side of label
        switch_id: ID for the input (auto-generated from name if not provided)
        input_cls: Additional classes for input element
        label_cls: Additional classes for label element
        **kwargs: Additional HTML attributes

    Returns:
        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
    """
    sw_id = switch_id or f"switch-{name}"

    # Wrapper classes
    wrapper_classes = ["form-check", "form-switch"]
    if reverse:
        wrapper_classes.append("form-check-reverse")

    user_cls = kwargs.pop("cls", "")
    wrapper_cls = merge_classes(" ".join(wrapper_classes), user_cls)

    # Input classes
    all_input_cls = merge_classes("form-check-input", input_cls)

    # Input attributes - switches use role="switch"
    input_attrs: dict[str, Any] = {
        "type": "checkbox",
        "cls": all_input_cls,
        "name": name,
        "value": value,
        "id": sw_id,
        "role": "switch",
    }

    if checked:
        input_attrs["checked"] = True
    if disabled:
        input_attrs["disabled"] = True
    if required:
        input_attrs["required"] = True

    input_attrs.update(convert_attrs(kwargs))

    # Build elements
    elements = [FTInput(**input_attrs)]

    if label:
        label_cls_final = merge_classes("form-check-label", label_cls)
        elements.append(Label(label, cls=label_cls_final, fr=sw_id))

    return Div(*elements, cls=wrapper_cls)

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/

Source code in src/faststrap/components/forms/checks.py

@register(category="forms")
def Range(
    name: str,
    *,
    label: str | None = None,
    value: int | float | None = None,
    min_val: int | float = 0,
    max_val: int | float = 100,
    step: int | float | None = None,
    disabled: bool = False,
    range_id: str | None = None,
    input_cls: str = "",
    label_cls: str = "",
    **kwargs: Any,
) -> Div:
    """Bootstrap Range (slider) component.

    A styled range slider input control.

    Args:
        name: Input name attribute
        label: Label text for the range
        value: Initial value
        min_val: Minimum value (default: 0)
        max_val: Maximum value (default: 100)
        step: Step increment (default: 1)
        disabled: Disable the range
        range_id: ID for the input (auto-generated from name if not provided)
        input_cls: Additional classes for input element
        label_cls: Additional classes for label element
        **kwargs: Additional HTML attributes

    Returns:
        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/
    """
    r_id = range_id or f"range-{name}"

    user_cls = kwargs.pop("cls", "")
    wrapper_cls = merge_classes("mb-3", user_cls)

    # Input classes
    all_input_cls = merge_classes("form-range", input_cls)

    # Input attributes
    input_attrs: dict[str, Any] = {
        "type": "range",
        "cls": all_input_cls,
        "name": name,
        "id": r_id,
        "min": str(min_val),
        "max": str(max_val),
    }

    if value is not None:
        input_attrs["value"] = str(value)
    if step is not None:
        input_attrs["step"] = str(step)
    if disabled:
        input_attrs["disabled"] = True

    input_attrs.update(convert_attrs(kwargs))

    # Build elements
    elements = []

    if label:
        label_cls_final = merge_classes("form-label", label_cls)
        elements.append(Label(label, cls=label_cls_final, fr=r_id))

    elements.append(FTInput(**input_attrs))

    return Div(*elements, cls=wrapper_cls)