toggle

Toggle is a checkbox that is styled to look like a switch button.

Base Toggle

toggle = SingleValueFactory("toggle", "Base toggle component for <input type=\"checkbox\"> element") # Base toggle component

Toggle Colors

toggle_colors = enums_to_simple_factory(toggle, [SemanticColorBrand, SemanticColorStatus], "toggle color variants using daisyUI semantic colors") # toggle color variants

Toggle Sizes

toggle_sizes = enums_to_simple_factory(toggle, [DaisyUINamedSize], "toggle size variants from extra small to extra large") # toggle size variants

Toggle Test Examples

---

test_toggle_basic_examples

def test_toggle_basic_examples(
    
):

Test basic toggle utilities.

def test_toggle_basic_examples():
    """Test basic toggle utilities."""
    # Basic toggle
    assert str(toggle) == "toggle"
    
    # Test with modifiers
    assert str(toggle.hover) == "hover:toggle"
    assert str(toggle.md) == "md:toggle"
    assert str(toggle.dark) == "dark:toggle"

# Run the tests
test_toggle_basic_examples()

---

test_toggle_colors_examples

def test_toggle_colors_examples(
    
):

Test toggle color variants.

def test_toggle_colors_examples():
    """Test toggle color variants."""
    # All color variants
    assert str(toggle_colors.neutral) == "toggle-neutral"
    assert str(toggle_colors.primary) == "toggle-primary"
    assert str(toggle_colors.secondary) == "toggle-secondary"
    assert str(toggle_colors.accent) == "toggle-accent"
    assert str(toggle_colors.info) == "toggle-info"
    assert str(toggle_colors.success) == "toggle-success"
    assert str(toggle_colors.warning) == "toggle-warning"
    assert str(toggle_colors.error) == "toggle-error"
    
    # With modifiers
    assert str(toggle_colors.primary.hover) == "hover:toggle-primary"
    assert str(toggle_colors.success.focus) == "focus:toggle-success"

# Run the tests
test_toggle_colors_examples()

---

test_toggle_sizes_examples

def test_toggle_sizes_examples(
    
):

Test toggle size variants.

def test_toggle_sizes_examples():
    """Test toggle size variants."""
    assert str(toggle_sizes.xs) == "toggle-xs"
    assert str(toggle_sizes.sm) == "toggle-sm"
    assert str(toggle_sizes.md) == "toggle-md"
    assert str(toggle_sizes.lg) == "toggle-lg"
    assert str(toggle_sizes.xl) == "toggle-xl"
    
    # With responsive modifiers
    assert str(toggle_sizes.xs.sm) == "sm:toggle-xs"
    assert str(toggle_sizes.lg.md) == "md:toggle-lg"

# Run the tests
test_toggle_sizes_examples()

---

test_toggle_basic_fasthtml_examples

def test_toggle_basic_fasthtml_examples(
    
):

Test basic toggle example from daisyUI v5 documentation.

def test_toggle_basic_fasthtml_examples():
    """Test basic toggle example from daisyUI v5 documentation."""
    from fasthtml.common import Input, Div
    
    # Basic toggle
    basic_toggle = Input(type="checkbox", checked="checked", cls=str(toggle))
    
    # Verify structure
    assert basic_toggle.tag == "input"
    assert basic_toggle.attrs['type'] == "checkbox"
    assert basic_toggle.attrs['checked'] == "checked"
    assert basic_toggle.attrs['class'] == "toggle"
    
    return Div(basic_toggle)

# Run the tests
test_toggle_basic_fasthtml_examples()

test_func = test_toggle_basic_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

test_toggle_with_fieldset_fasthtml_examples

def test_toggle_with_fieldset_fasthtml_examples(
    
):

Test toggle with fieldset and label from daisyUI v5 documentation.

def test_toggle_with_fieldset_fasthtml_examples():
    """Test toggle with fieldset and label from daisyUI v5 documentation."""
    from fasthtml.common import Fieldset, Legend, Label, Input, Div
    from cjm_fasthtml_tailwind.utilities.sizing import w
    from cjm_fasthtml_tailwind.utilities.borders import border, rounded
    from cjm_fasthtml_tailwind.utilities.spacing import p
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui, border_dui
    from cjm_fasthtml_daisyui.components.data_input.fieldset import fieldset, fieldset_legend
    from cjm_fasthtml_daisyui.components.data_input.label import label
    
    # Toggle with fieldset and label
    toggle_fieldset = Fieldset(
        Legend("Login options", cls=str(fieldset_legend)),
        Label(
            Input(type="checkbox", checked="checked", cls=str(toggle)),
            "Remember me",
            cls=str(label)
        ),
        cls=combine_classes(fieldset, bg_dui.base_100, border_dui.base_300, rounded.box, w._64, border, p._4)
    )
    
    # Verify fieldset structure
    assert toggle_fieldset.tag == "fieldset"
    assert "fieldset" in toggle_fieldset.attrs['class']
    assert "bg-base-100" in toggle_fieldset.attrs['class']
    assert "border-base-300" in toggle_fieldset.attrs['class']
    assert "rounded-box" in toggle_fieldset.attrs['class']
    assert "w-64" in toggle_fieldset.attrs['class']
    assert "border" in toggle_fieldset.attrs['class']
    assert "p-4" in toggle_fieldset.attrs['class']
    
    # Verify legend
    legend_el = toggle_fieldset.children[0]
    assert legend_el.tag == "legend"
    assert "fieldset-legend" in legend_el.attrs['class']
    assert legend_el.children[0] == "Login options"
    
    # Verify label
    label_el = toggle_fieldset.children[1]
    assert label_el.tag == "label"
    assert "label" in label_el.attrs['class']
    
    # Verify input inside label
    input_el = label_el.children[0]
    assert input_el.tag == "input"
    assert input_el.attrs['type'] == "checkbox"
    assert input_el.attrs['checked'] == "checked"
    assert "toggle" in input_el.attrs['class']
    
    # Verify label text
    assert label_el.children[1] == "Remember me"
    
    return Div(toggle_fieldset)

# Run the tests
test_toggle_with_fieldset_fasthtml_examples()

Login options

Remember me

test_func = test_toggle_with_fieldset_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

test_toggle_sizes_fasthtml_examples

def test_toggle_sizes_fasthtml_examples(
    
):

Test toggle size variations from daisyUI v5 documentation.

def test_toggle_sizes_fasthtml_examples():
    """Test toggle size variations from daisyUI v5 documentation."""
    from fasthtml.common import Input, Div
    
    # Toggle sizes
    xs_toggle = Input(type="checkbox", checked="checked", cls=combine_classes(toggle, toggle_sizes.xs))
    assert xs_toggle.tag == "input"
    assert xs_toggle.attrs['type'] == "checkbox"
    assert xs_toggle.attrs['checked'] == "checked"
    assert "toggle" in xs_toggle.attrs['class']
    assert "toggle-xs" in xs_toggle.attrs['class']
    
    sm_toggle = Input(type="checkbox", checked="checked", cls=combine_classes(toggle, toggle_sizes.sm))
    assert "toggle" in sm_toggle.attrs['class']
    assert "toggle-sm" in sm_toggle.attrs['class']
    
    md_toggle = Input(type="checkbox", checked="checked", cls=combine_classes(toggle, toggle_sizes.md))
    assert "toggle" in md_toggle.attrs['class']
    assert "toggle-md" in md_toggle.attrs['class']
    
    lg_toggle = Input(type="checkbox", checked="checked", cls=combine_classes(toggle, toggle_sizes.lg))
    assert "toggle" in lg_toggle.attrs['class']
    assert "toggle-lg" in lg_toggle.attrs['class']
    
    xl_toggle = Input(type="checkbox", checked="checked", cls=combine_classes(toggle, toggle_sizes.xl))
    assert "toggle" in xl_toggle.attrs['class']
    assert "toggle-xl" in xl_toggle.attrs['class']
    
    # Return all elements in a Div
    return Div(
        xs_toggle,
        sm_toggle,
        md_toggle,
        lg_toggle,
        xl_toggle
    )

# Run the tests
test_toggle_sizes_fasthtml_examples()

test_func = test_toggle_sizes_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

test_toggle_colors_fasthtml_examples

def test_toggle_colors_fasthtml_examples(
    
):

Test toggle color variations from daisyUI v5 documentation.

def test_toggle_colors_fasthtml_examples():
    """Test toggle color variations from daisyUI v5 documentation."""
    from fasthtml.common import Input, Div
    
    # Toggle colors
    primary_toggle = Input(type="checkbox", checked="checked", cls=combine_classes(toggle, toggle_colors.primary))
    assert "toggle" in primary_toggle.attrs['class']
    assert "toggle-primary" in primary_toggle.attrs['class']
    
    secondary_toggle = Input(type="checkbox", checked="checked", cls=combine_classes(toggle, toggle_colors.secondary))
    assert "toggle" in secondary_toggle.attrs['class']
    assert "toggle-secondary" in secondary_toggle.attrs['class']
    
    accent_toggle = Input(type="checkbox", checked="checked", cls=combine_classes(toggle, toggle_colors.accent))
    assert "toggle" in accent_toggle.attrs['class']
    assert "toggle-accent" in accent_toggle.attrs['class']
    
    neutral_toggle = Input(type="checkbox", checked="checked", cls=combine_classes(toggle, toggle_colors.neutral))
    assert "toggle" in neutral_toggle.attrs['class']
    assert "toggle-neutral" in neutral_toggle.attrs['class']
    
    info_toggle = Input(type="checkbox", checked="checked", cls=combine_classes(toggle, toggle_colors.info))
    assert "toggle" in info_toggle.attrs['class']
    assert "toggle-info" in info_toggle.attrs['class']
    
    success_toggle = Input(type="checkbox", checked="checked", cls=combine_classes(toggle, toggle_colors.success))
    assert "toggle" in success_toggle.attrs['class']
    assert "toggle-success" in success_toggle.attrs['class']
    
    warning_toggle = Input(type="checkbox", checked="checked", cls=combine_classes(toggle, toggle_colors.warning))
    assert "toggle" in warning_toggle.attrs['class']
    assert "toggle-warning" in warning_toggle.attrs['class']
    
    error_toggle = Input(type="checkbox", checked="checked", cls=combine_classes(toggle, toggle_colors.error))
    assert "toggle" in error_toggle.attrs['class']
    assert "toggle-error" in error_toggle.attrs['class']
    
    # Return all elements in a Div
    return Div(
        primary_toggle,
        secondary_toggle,
        accent_toggle,
        neutral_toggle,
        info_toggle,
        success_toggle,
        warning_toggle,
        error_toggle
    )

# Run the tests
test_toggle_colors_fasthtml_examples()

test_func = test_toggle_colors_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

test_toggle_disabled_fasthtml_examples

def test_toggle_disabled_fasthtml_examples(
    
):

Test disabled toggle states from daisyUI v5 documentation.

def test_toggle_disabled_fasthtml_examples():
    """Test disabled toggle states from daisyUI v5 documentation."""
    from fasthtml.common import Input, Div
    
    # Disabled toggle (unchecked)
    disabled_unchecked = Input(type="checkbox", cls=str(toggle), disabled="disabled")
    assert disabled_unchecked.tag == "input"
    assert disabled_unchecked.attrs['type'] == "checkbox"
    assert disabled_unchecked.attrs['class'] == "toggle"
    assert disabled_unchecked.attrs['disabled'] == "disabled"
    assert 'checked' not in disabled_unchecked.attrs
    
    # Disabled toggle (checked)
    disabled_checked = Input(type="checkbox", cls=str(toggle), disabled="disabled", checked="checked")
    assert disabled_checked.tag == "input"
    assert disabled_checked.attrs['type'] == "checkbox"
    assert disabled_checked.attrs['class'] == "toggle"
    assert disabled_checked.attrs['disabled'] == "disabled"
    assert disabled_checked.attrs['checked'] == "checked"
    
    # Return all elements in a Div
    return Div(
        disabled_unchecked,
        disabled_checked
    )

# Run the tests
test_toggle_disabled_fasthtml_examples()

test_func = test_toggle_disabled_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

test_toggle_with_icons_fasthtml_examples

def test_toggle_with_icons_fasthtml_examples(
    
):

Test toggle with icons inside from daisyUI v5 documentation.

def test_toggle_with_icons_fasthtml_examples():
    """Test toggle with icons inside from daisyUI v5 documentation."""
    from fasthtml.common import Label, Input, Div
    from fasthtml.svg import Svg, G, Path
    from cjm_fasthtml_daisyui.utilities.semantic_colors import text_dui
    
    # Create checkmark icon for enabled state
    checkmark_icon = Svg(
        G(
            Path(d="M20 6 9 17l-5-5"),
            stroke_linejoin="round",
            stroke_linecap="round",
            stroke_width="4",
            fill="none",
            stroke="currentColor"
        ),
        aria_label="enabled",
        xmlns="http://www.w3.org/2000/svg",
        viewBox="0 0 24 24"
    )
    
    # Create X icon for disabled state
    x_icon = Svg(
        Path(d="M18 6 6 18"),
        Path(d="m6 6 12 12"),
        xmlns="http://www.w3.org/2000/svg",
        viewBox="0 0 24 24",
        fill="none",
        stroke="currentColor",
        stroke_width="4",
        stroke_linecap="round",
        stroke_linejoin="round",
        aria_label="disabled"
    )
    
    # Toggle with icons inside
    toggle_with_icons = Label(
        Input(type="checkbox"),
        checkmark_icon,
        x_icon,
        cls=combine_classes(toggle, text_dui.base_content)
    )
    
    # Verify structure
    assert toggle_with_icons.tag == "label"
    assert "toggle" in toggle_with_icons.attrs['class']
    assert "text-base-content" in toggle_with_icons.attrs['class']
    
    # Verify input
    input_el = toggle_with_icons.children[0]
    assert input_el.tag == "input"
    assert input_el.attrs['type'] == "checkbox"
    
    # Verify checkmark icon (enabled state)
    checkmark_svg = toggle_with_icons.children[1]
    assert checkmark_svg.tag == "svg"
    assert checkmark_svg.attrs['aria-label'] == "enabled"
    assert checkmark_svg.attrs['viewbox'] == "0 0 24 24"
    
    # Verify X icon (disabled state)
    x_svg = toggle_with_icons.children[2]
    assert x_svg.tag == "svg"
    assert x_svg.attrs['aria-label'] == "disabled"
    assert x_svg.attrs['viewbox'] == "0 0 24 24"
    
    return Div(toggle_with_icons)

# Run the tests
test_toggle_with_icons_fasthtml_examples()

test_func = test_toggle_with_icons_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

test_toggle_custom_colors_fasthtml_examples

def test_toggle_custom_colors_fasthtml_examples(
    
):

Test toggle with custom colors from daisyUI v5 documentation.

def test_toggle_custom_colors_fasthtml_examples():
    """Test toggle with custom colors from daisyUI v5 documentation."""
    from fasthtml.common import Input, Div
    from cjm_fasthtml_tailwind.utilities.borders import border_color
    from cjm_fasthtml_tailwind.utilities.backgrounds import bg
    from cjm_fasthtml_tailwind.utilities.typography import font_size, font_weight, font_family, text_color
    
    # Toggle with custom colors
    custom_toggle = Input(
        type="checkbox",
        checked="checked",
        cls=combine_classes(
            toggle,
            border_color.indigo_600,
            bg.indigo_500,
            border_color.orange_500.checked,
            bg.orange_400.checked,
            text_color.orange_800.checked
        )
    )
    
    # Verify structure
    assert custom_toggle.tag == "input"
    assert custom_toggle.attrs['type'] == "checkbox"
    assert custom_toggle.attrs['checked'] == "checked"
    assert "toggle" in custom_toggle.attrs['class']
    assert "border-indigo-600" in custom_toggle.attrs['class']
    assert "bg-indigo-500" in custom_toggle.attrs['class']
    assert "checked:border-orange-500" in custom_toggle.attrs['class']
    assert "checked:bg-orange-400" in custom_toggle.attrs['class']
    assert "checked:text-orange-800" in custom_toggle.attrs['class']
    
    return Div(custom_toggle)

# Run the tests
test_toggle_custom_colors_fasthtml_examples()

test_func = test_toggle_custom_colors_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

test_toggle_indeterminate_fasthtml_examples

def test_toggle_indeterminate_fasthtml_examples(
    
):

Test indeterminate toggle state from daisyUI v5 documentation.

def test_toggle_indeterminate_fasthtml_examples():
    """Test indeterminate toggle state from daisyUI v5 documentation."""
    from fasthtml.common import Input, Script, Div
    
    # Indeterminate toggle
    # Note: The indeterminate state must be set via JavaScript
    indeterminate_toggle = Input(type="checkbox", cls=str(toggle), id="my-toggle")
    
    # JavaScript to set indeterminate state
    # In a real application, this would be in a script tag or external JS file
    indeterminate_script = Script("""
        document.getElementById("my-toggle").indeterminate = true
    """)
    
    # Verify structure
    assert indeterminate_toggle.tag == "input"
    assert indeterminate_toggle.attrs['type'] == "checkbox"
    assert indeterminate_toggle.attrs['class'] == "toggle"
    assert indeterminate_toggle.attrs['id'] == "my-toggle"
    
    assert indeterminate_script.tag == "script"
    assert 'document.getElementById("my-toggle").indeterminate = true' in indeterminate_script.children[0]
    
    return Div(
        indeterminate_toggle,
        indeterminate_script
    )

# Run the tests
test_toggle_indeterminate_fasthtml_examples()

test_func = test_toggle_indeterminate_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()