checkbox

Checkboxes are used to select or deselect a value.

Base Checkbox

Exported source

checkbox = SingleValueFactory("checkbox", "Base checkbox component") # Base checkbox component

Checkbox Colors

Exported source

checkbox_colors = enums_to_simple_factory(checkbox, [SemanticColorBrand, SemanticColorStatus], "Checkbox color variants using daisyUI semantic colors") # Checkbox color variants

Checkbox Sizes

Exported source

checkbox_sizes = enums_to_simple_factory(checkbox, [DaisyUINamedSize], "Checkbox size variants from extra small to extra large") # Checkbox size variants

Checkbox Test Examples

source

test_checkbox_basic_examples

 test_checkbox_basic_examples ()

Test basic checkbox utilities.

Exported source

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

# Run the tests
test_checkbox_basic_examples()

source

test_checkbox_colors_examples

 test_checkbox_colors_examples ()

Test checkbox color variants.

Exported source

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

# Run the tests
test_checkbox_colors_examples()

source

test_checkbox_sizes_examples

 test_checkbox_sizes_examples ()

Test checkbox size variants.

Exported source

def test_checkbox_sizes_examples():
    """Test checkbox size variants."""
    assert str(checkbox_sizes.xs) == "checkbox-xs"
    assert str(checkbox_sizes.sm) == "checkbox-sm"
    assert str(checkbox_sizes.md) == "checkbox-md"
    assert str(checkbox_sizes.lg) == "checkbox-lg"
    assert str(checkbox_sizes.xl) == "checkbox-xl"
    
    # With responsive modifiers
    assert str(checkbox_sizes.xs.sm) == "sm:checkbox-xs"
    assert str(checkbox_sizes.lg.md) == "md:checkbox-lg"

# Run the tests
test_checkbox_sizes_examples()

source

test_checkbox_basic_fasthtml_examples

 test_checkbox_basic_fasthtml_examples ()

Test basic checkbox example from daisyUI v5 documentation.

Exported source

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

# Run the tests
test_checkbox_basic_fasthtml_examples()

<div>
  <input type="checkbox" checked="checked" class="checkbox">
</div>

test_func = test_checkbox_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()

source

test_checkbox_with_fieldset_fasthtml_examples

 test_checkbox_with_fieldset_fasthtml_examples ()

Test checkbox with fieldset and label from daisyUI v5 documentation.

Exported source

def test_checkbox_with_fieldset_fasthtml_examples():
    """Test checkbox 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.spacing import p
    from cjm_fasthtml_tailwind.utilities.borders import border, rounded
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui, border_dui
    from cjm_fasthtml_daisyui.components.data_input.fieldset import fieldset, fieldset_legend, label
    
    # Checkbox with fieldset and label
    fieldset_checkbox = Fieldset(
        Legend("Login options", cls=str(fieldset_legend)),
        Label(
            Input(
                type="checkbox",
                checked="checked",
                cls=str(checkbox)
            ),
            "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 fieldset_checkbox.tag == "fieldset"
    assert "fieldset" in fieldset_checkbox.attrs['class']
    assert "bg-base-100" in fieldset_checkbox.attrs['class']
    assert "border-base-300" in fieldset_checkbox.attrs['class']
    assert "rounded-box" in fieldset_checkbox.attrs['class']
    assert "w-64" in fieldset_checkbox.attrs['class']
    assert "border" in fieldset_checkbox.attrs['class']
    assert "p-4" in fieldset_checkbox.attrs['class']
    
    # Verify legend
    legend_element = fieldset_checkbox.children[0]
    assert legend_element.tag == "legend"
    assert legend_element.attrs['class'] == "fieldset-legend"
    assert legend_element.children[0] == "Login options"
    
    # Verify label
    label_element = fieldset_checkbox.children[1]
    assert label_element.tag == "label"
    assert label_element.attrs['class'] == "label"
    
    # Verify checkbox inside label
    checkbox_input = label_element.children[0]
    assert checkbox_input.tag == "input"
    assert checkbox_input.attrs['type'] == "checkbox"
    assert checkbox_input.attrs['checked'] == "checked"
    assert checkbox_input.attrs['class'] == "checkbox"
    
    # Verify label text
    assert label_element.children[1] == "Remember me"
    
    return Div(fieldset_checkbox)

# Run the tests
test_checkbox_with_fieldset_fasthtml_examples()

<div>
<fieldset class="fieldset bg-base-100 border-base-300 rounded-box w-64 &lt;cjm_fasthtml_tailwind.utilities.borders.BorderWidthFactory object at 0x7f3f56856390&gt; p-4"><legend class="fieldset-legend">Login options</legend><label class="label">      <input type="checkbox" checked="checked" class="checkbox">
Remember me</label></fieldset></div>

test_func = test_checkbox_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()

source

test_checkbox_sizes_fasthtml_examples

 test_checkbox_sizes_fasthtml_examples ()

Test checkbox size variations from daisyUI v5 documentation.

Exported source

def test_checkbox_sizes_fasthtml_examples():
    """Test checkbox size variations from daisyUI v5 documentation."""
    from fasthtml.common import Input, Div
    
    # Extra small checkbox
    xs_checkbox = Input(
        type="checkbox",
        checked="checked",
        cls=combine_classes(checkbox, checkbox_sizes.xs)
    )
    assert "checkbox" in xs_checkbox.attrs['class']
    assert "checkbox-xs" in xs_checkbox.attrs['class']
    
    # Small checkbox
    sm_checkbox = Input(
        type="checkbox",
        checked="checked",
        cls=combine_classes(checkbox, checkbox_sizes.sm)
    )
    assert "checkbox-sm" in sm_checkbox.attrs['class']
    
    # Medium checkbox
    md_checkbox = Input(
        type="checkbox",
        checked="checked",
        cls=combine_classes(checkbox, checkbox_sizes.md)
    )
    assert "checkbox-md" in md_checkbox.attrs['class']
    
    # Large checkbox
    lg_checkbox = Input(
        type="checkbox",
        checked="checked",
        cls=combine_classes(checkbox, checkbox_sizes.lg)
    )
    assert "checkbox-lg" in lg_checkbox.attrs['class']
    
    # Extra large checkbox
    xl_checkbox = Input(
        type="checkbox",
        checked="checked",
        cls=combine_classes(checkbox, checkbox_sizes.xl)
    )
    assert "checkbox-xl" in xl_checkbox.attrs['class']
    
    return Div(
        xs_checkbox,
        sm_checkbox,
        md_checkbox,
        lg_checkbox,
        xl_checkbox
    )

# Run the tests
test_checkbox_sizes_fasthtml_examples()

<div>
  <input type="checkbox" checked="checked" class="checkbox checkbox-xs">
  <input type="checkbox" checked="checked" class="checkbox checkbox-sm">
  <input type="checkbox" checked="checked" class="checkbox checkbox-md">
  <input type="checkbox" checked="checked" class="checkbox checkbox-lg">
  <input type="checkbox" checked="checked" class="checkbox checkbox-xl">
</div>

test_func = test_checkbox_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()

source

test_checkbox_colors_fasthtml_examples

 test_checkbox_colors_fasthtml_examples ()

Test checkbox color variations from daisyUI v5 documentation.

Exported source

def test_checkbox_colors_fasthtml_examples():
    """Test checkbox color variations from daisyUI v5 documentation."""
    from fasthtml.common import Input, Div
    
    # Primary checkbox
    primary_checkbox = Input(
        type="checkbox",
        checked="checked",
        cls=combine_classes(checkbox, checkbox_colors.primary)
    )
    assert "checkbox" in primary_checkbox.attrs['class']
    assert "checkbox-primary" in primary_checkbox.attrs['class']
    
    # Secondary checkbox
    secondary_checkbox = Input(
        type="checkbox",
        checked="checked",
        cls=combine_classes(checkbox, checkbox_colors.secondary)
    )
    assert "checkbox-secondary" in secondary_checkbox.attrs['class']
    
    # Accent checkbox
    accent_checkbox = Input(
        type="checkbox",
        checked="checked",
        cls=combine_classes(checkbox, checkbox_colors.accent)
    )
    assert "checkbox-accent" in accent_checkbox.attrs['class']
    
    # Neutral checkbox
    neutral_checkbox = Input(
        type="checkbox",
        checked="checked",
        cls=combine_classes(checkbox, checkbox_colors.neutral)
    )
    assert "checkbox-neutral" in neutral_checkbox.attrs['class']
    
    # Info checkbox
    info_checkbox = Input(
        type="checkbox",
        checked="checked",
        cls=combine_classes(checkbox, checkbox_colors.info)
    )
    assert "checkbox-info" in info_checkbox.attrs['class']
    
    # Success checkbox
    success_checkbox = Input(
        type="checkbox",
        checked="checked",
        cls=combine_classes(checkbox, checkbox_colors.success)
    )
    assert "checkbox-success" in success_checkbox.attrs['class']
    
    # Warning checkbox
    warning_checkbox = Input(
        type="checkbox",
        checked="checked",
        cls=combine_classes(checkbox, checkbox_colors.warning)
    )
    assert "checkbox-warning" in warning_checkbox.attrs['class']
    
    # Error checkbox
    error_checkbox = Input(
        type="checkbox",
        checked="checked",
        cls=combine_classes(checkbox, checkbox_colors.error)
    )
    assert "checkbox-error" in error_checkbox.attrs['class']
    
    return Div(
        primary_checkbox,
        secondary_checkbox,
        accent_checkbox,
        neutral_checkbox,
        info_checkbox,
        success_checkbox,
        warning_checkbox,
        error_checkbox
    )

# Run the tests
test_checkbox_colors_fasthtml_examples()

<div>
  <input type="checkbox" checked="checked" class="checkbox checkbox-primary">
  <input type="checkbox" checked="checked" class="checkbox checkbox-secondary">
  <input type="checkbox" checked="checked" class="checkbox checkbox-accent">
  <input type="checkbox" checked="checked" class="checkbox checkbox-neutral">
  <input type="checkbox" checked="checked" class="checkbox checkbox-info">
  <input type="checkbox" checked="checked" class="checkbox checkbox-success">
  <input type="checkbox" checked="checked" class="checkbox checkbox-warning">
  <input type="checkbox" checked="checked" class="checkbox checkbox-error">
</div>

test_func = test_checkbox_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()

source

test_checkbox_disabled_fasthtml_examples

 test_checkbox_disabled_fasthtml_examples ()

Test disabled checkbox variations from daisyUI v5 documentation.

Exported source

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

# Run the tests
test_checkbox_disabled_fasthtml_examples()

<div>
  <input type="checkbox" disabled class="checkbox">
  <input type="checkbox" disabled checked="checked" class="checkbox">
</div>

test_func = test_checkbox_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()

source

test_checkbox_indeterminate_fasthtml_examples

 test_checkbox_indeterminate_fasthtml_examples ()

Test indeterminate checkbox from daisyUI v5 documentation.

Exported source

def test_checkbox_indeterminate_fasthtml_examples():
    """Test indeterminate checkbox from daisyUI v5 documentation."""
    from fasthtml.common import Input, Script, Div
    
    # Indeterminate checkbox (requires JavaScript to set the state)
    # Note: The indeterminate state must be set via JavaScript
    indeterminate_checkbox = Input(
        type="checkbox",
        cls=str(checkbox),
        id="my-checkbox"
    )
    
    # JavaScript to set indeterminate state
    indeterminate_script = Script("""
        document.getElementById("my-checkbox").indeterminate = true;
    """)
    
    # Verify checkbox attributes
    assert indeterminate_checkbox.tag == "input"
    assert indeterminate_checkbox.attrs['type'] == "checkbox"
    assert indeterminate_checkbox.attrs['class'] == "checkbox"
    assert indeterminate_checkbox.attrs['id'] == "my-checkbox"
    
    # Verify script element
    assert indeterminate_script.tag == "script"
    assert "indeterminate = true" in indeterminate_script.children[0]
    
    return Div(
        indeterminate_script,
        indeterminate_checkbox
    )

# Run the tests
test_checkbox_indeterminate_fasthtml_examples()

<div>
<script>
        document.getElementById("my-checkbox").indeterminate = true;
    </script>  <input type="checkbox" id="my-checkbox" class="checkbox" name="my-checkbox">
</div>

test_func = test_checkbox_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()

source

test_checkbox_custom_colors_fasthtml_examples

 test_checkbox_custom_colors_fasthtml_examples ()

Test checkbox with custom colors from daisyUI v5 documentation.

Exported source

def test_checkbox_custom_colors_fasthtml_examples():
    """Test checkbox 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
    
    # Checkbox with custom colors
    custom_color_checkbox = Input(
        type="checkbox",
        checked="checked",
        cls=combine_classes(
            checkbox,
            border_color.indigo._600,
            bg.indigo._500,
            border_color.orange._500.checked,
            bg.orange._400.checked,
            text_color.orange._800.checked
        )
    )
    
    # Verify attributes
    assert custom_color_checkbox.tag == "input"
    assert custom_color_checkbox.attrs['type'] == "checkbox"
    assert custom_color_checkbox.attrs['checked'] == "checked"
    assert "checkbox" in custom_color_checkbox.attrs['class']
    assert "border-indigo-600" in custom_color_checkbox.attrs['class']
    assert "bg-indigo-500" in custom_color_checkbox.attrs['class']
    assert "checked:border-orange-500" in custom_color_checkbox.attrs['class']
    assert "checked:bg-orange-400" in custom_color_checkbox.attrs['class']
    assert "checked:text-orange-800" in custom_color_checkbox.attrs['class']
    
    return Div(custom_color_checkbox)

# Run the tests
test_checkbox_custom_colors_fasthtml_examples()

<div>
  <input type="checkbox" checked="checked" class="checkbox border-indigo-600 bg-indigo-500 checked:border-orange-500 checked:bg-orange-400 checked:text-orange-800">
</div>

test_func = test_checkbox_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()