radio

Radio buttons allow the user to select one option from a set.

Base Radio

radio = SingleValueFactory("radio", "Base radio button component for radio input") # Base radio component

Radio Colors

radio_colors = enums_to_simple_factory(radio, [SemanticColorBrand, SemanticColorStatus], "Radio color variants using daisyUI semantic colors") # Radio color variants

Radio Sizes

radio_sizes = enums_to_simple_factory(radio, [DaisyUINamedSize], "Radio size variants from extra small to extra large") # Radio size variants

Radio Test Examples

---

source

test_radio_basic_examples

 test_radio_basic_examples ()

Test basic radio utilities.

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

# Run the tests
test_radio_basic_examples()

---

source

test_radio_colors_examples

 test_radio_colors_examples ()

Test radio color variants.

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

# Run the tests
test_radio_colors_examples()

---

source

test_radio_sizes_examples

 test_radio_sizes_examples ()

Test radio size variants.

def test_radio_sizes_examples():
    """Test radio size variants."""
    assert str(radio_sizes.xs) == "radio-xs"
    assert str(radio_sizes.sm) == "radio-sm"
    assert str(radio_sizes.md) == "radio-md"
    assert str(radio_sizes.lg) == "radio-lg"
    assert str(radio_sizes.xl) == "radio-xl"
    
    # With responsive modifiers
    assert str(radio_sizes.xs.sm) == "sm:radio-xs"
    assert str(radio_sizes.lg.md) == "md:radio-lg"

# Run the tests
test_radio_sizes_examples()

---

source

test_radio_basic_fasthtml_examples

 test_radio_basic_fasthtml_examples ()

Test basic radio button examples from daisyUI v5 documentation.

def test_radio_basic_fasthtml_examples():
    """Test basic radio button examples from daisyUI v5 documentation."""
    from fasthtml.common import Input, Div
    
    # Basic radio buttons
    radio1_checked = Input(
        type="radio",
        name="radio-1",
        cls=str(radio),
        checked="checked"
    )
    assert radio1_checked.tag == "input"
    assert radio1_checked.attrs['type'] == "radio"
    assert radio1_checked.attrs['name'] == "radio-1"
    assert radio1_checked.attrs['class'] == "radio"
    assert radio1_checked.attrs['checked'] == "checked"
    
    radio1_unchecked = Input(
        type="radio",
        name="radio-1",
        cls=str(radio)
    )
    assert radio1_unchecked.tag == "input"
    assert radio1_unchecked.attrs['type'] == "radio"
    assert radio1_unchecked.attrs['name'] == "radio-1"
    assert radio1_unchecked.attrs['class'] == "radio"
    assert 'checked' not in radio1_unchecked.attrs
    
    # Return both radio buttons in a Div
    return Div(
        radio1_checked,
        radio1_unchecked
    )

# Run the tests
test_radio_basic_fasthtml_examples()

<div>
  <input type="radio" name="radio-1" checked="checked" class="radio">
  <input type="radio" name="radio-1" class="radio">
</div>

test_func = test_radio_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_radio_sizes_fasthtml_examples

 test_radio_sizes_fasthtml_examples ()

Test radio button size variations from daisyUI v5 documentation.

def test_radio_sizes_fasthtml_examples():
    """Test radio button size variations from daisyUI v5 documentation."""
    from fasthtml.common import Input, Div
    
    # Radio sizes
    xs_radio = Input(
        type="radio",
        name="radio-2",
        cls=combine_classes(radio, radio_sizes.xs),
        checked="checked"
    )
    assert xs_radio.tag == "input"
    assert "radio" in xs_radio.attrs['class']
    assert "radio-xs" in xs_radio.attrs['class']
    assert xs_radio.attrs['checked'] == "checked"
    
    sm_radio = Input(
        type="radio",
        name="radio-2",
        cls=combine_classes(radio, radio_sizes.sm),
        checked="checked"
    )
    assert "radio" in sm_radio.attrs['class']
    assert "radio-sm" in sm_radio.attrs['class']
    
    md_radio = Input(
        type="radio",
        name="radio-2",
        cls=combine_classes(radio, radio_sizes.md),
        checked="checked"
    )
    assert "radio" in md_radio.attrs['class']
    assert "radio-md" in md_radio.attrs['class']
    
    lg_radio = Input(
        type="radio",
        name="radio-2",
        cls=combine_classes(radio, radio_sizes.lg),
        checked="checked"
    )
    assert "radio" in lg_radio.attrs['class']
    assert "radio-lg" in lg_radio.attrs['class']
    
    xl_radio = Input(
        type="radio",
        name="radio-2",
        cls=combine_classes(radio, radio_sizes.xl),
        checked="checked"
    )
    assert "radio" in xl_radio.attrs['class']
    assert "radio-xl" in xl_radio.attrs['class']
    
    # Return all size variations in a Div
    return Div(
        xs_radio,
        sm_radio,
        md_radio,
        lg_radio,
        xl_radio
    )

# Run the tests
test_radio_sizes_fasthtml_examples()

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

test_func = test_radio_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_radio_colors_fasthtml_examples

 test_radio_colors_fasthtml_examples ()

Test radio button color variations from daisyUI v5 documentation.

def test_radio_colors_fasthtml_examples():
    """Test radio button color variations from daisyUI v5 documentation."""
    from fasthtml.common import Input, Div
    
    # Neutral color
    neutral_checked = Input(
        type="radio",
        name="radio-3",
        cls=combine_classes(radio, radio_colors.neutral),
        checked="checked"
    )
    assert "radio" in neutral_checked.attrs['class']
    assert "radio-neutral" in neutral_checked.attrs['class']
    assert neutral_checked.attrs['name'] == "radio-3"
    assert neutral_checked.attrs['checked'] == "checked"
    
    neutral_unchecked = Input(
        type="radio",
        name="radio-3",
        cls=combine_classes(radio, radio_colors.neutral)
    )
    assert "radio-neutral" in neutral_unchecked.attrs['class']
    assert 'checked' not in neutral_unchecked.attrs
    
    # Primary color
    primary_checked = Input(
        type="radio",
        name="radio-4",
        cls=combine_classes(radio, radio_colors.primary),
        checked="checked"
    )
    assert "radio-primary" in primary_checked.attrs['class']
    assert primary_checked.attrs['name'] == "radio-4"
    
    primary_unchecked = Input(
        type="radio",
        name="radio-4",
        cls=combine_classes(radio, radio_colors.primary)
    )
    assert "radio-primary" in primary_unchecked.attrs['class']
    
    # Secondary color
    secondary_checked = Input(
        type="radio",
        name="radio-5",
        cls=combine_classes(radio, radio_colors.secondary),
        checked="checked"
    )
    assert "radio-secondary" in secondary_checked.attrs['class']
    assert secondary_checked.attrs['name'] == "radio-5"
    
    secondary_unchecked = Input(
        type="radio",
        name="radio-5",
        cls=combine_classes(radio, radio_colors.secondary)
    )
    assert "radio-secondary" in secondary_unchecked.attrs['class']
    
    # Accent color
    accent_checked = Input(
        type="radio",
        name="radio-6",
        cls=combine_classes(radio, radio_colors.accent),
        checked="checked"
    )
    assert "radio-accent" in accent_checked.attrs['class']
    assert accent_checked.attrs['name'] == "radio-6"
    
    accent_unchecked = Input(
        type="radio",
        name="radio-6",
        cls=combine_classes(radio, radio_colors.accent)
    )
    assert "radio-accent" in accent_unchecked.attrs['class']
    
    # Success color
    success_checked = Input(
        type="radio",
        name="radio-7",
        cls=combine_classes(radio, radio_colors.success),
        checked="checked"
    )
    assert "radio-success" in success_checked.attrs['class']
    assert success_checked.attrs['name'] == "radio-7"
    
    success_unchecked = Input(
        type="radio",
        name="radio-7",
        cls=combine_classes(radio, radio_colors.success)
    )
    assert "radio-success" in success_unchecked.attrs['class']
    
    # Warning color
    warning_checked = Input(
        type="radio",
        name="radio-8",
        cls=combine_classes(radio, radio_colors.warning),
        checked="checked"
    )
    assert "radio-warning" in warning_checked.attrs['class']
    assert warning_checked.attrs['name'] == "radio-8"
    
    warning_unchecked = Input(
        type="radio",
        name="radio-8",
        cls=combine_classes(radio, radio_colors.warning)
    )
    assert "radio-warning" in warning_unchecked.attrs['class']
    
    # Info color
    info_checked = Input(
        type="radio",
        name="radio-9",
        cls=combine_classes(radio, radio_colors.info),
        checked="checked"
    )
    assert "radio-info" in info_checked.attrs['class']
    assert info_checked.attrs['name'] == "radio-9"
    
    info_unchecked = Input(
        type="radio",
        name="radio-9",
        cls=combine_classes(radio, radio_colors.info)
    )
    assert "radio-info" in info_unchecked.attrs['class']
    
    # Error color
    error_checked = Input(
        type="radio",
        name="radio-10",
        cls=combine_classes(radio, radio_colors.error),
        checked="checked"
    )
    assert "radio-error" in error_checked.attrs['class']
    assert error_checked.attrs['name'] == "radio-10"
    
    error_unchecked = Input(
        type="radio",
        name="radio-10",
        cls=combine_classes(radio, radio_colors.error)
    )
    assert "radio-error" in error_unchecked.attrs['class']
    
    # Return all color variations in grouped Divs
    return Div(
        Div(neutral_checked, neutral_unchecked),
        Div(primary_checked, primary_unchecked),
        Div(secondary_checked, secondary_unchecked),
        Div(accent_checked, accent_unchecked),
        Div(success_checked, success_unchecked),
        Div(warning_checked, warning_unchecked),
        Div(info_checked, info_unchecked),
        Div(error_checked, error_unchecked)
    )

# Run the tests
test_radio_colors_fasthtml_examples()

<div>
  <div>
    <input type="radio" name="radio-3" checked="checked" class="radio radio-neutral">
    <input type="radio" name="radio-3" class="radio radio-neutral">
  </div>
  <div>
    <input type="radio" name="radio-4" checked="checked" class="radio radio-primary">
    <input type="radio" name="radio-4" class="radio radio-primary">
  </div>
  <div>
    <input type="radio" name="radio-5" checked="checked" class="radio radio-secondary">
    <input type="radio" name="radio-5" class="radio radio-secondary">
  </div>
  <div>
    <input type="radio" name="radio-6" checked="checked" class="radio radio-accent">
    <input type="radio" name="radio-6" class="radio radio-accent">
  </div>
  <div>
    <input type="radio" name="radio-7" checked="checked" class="radio radio-success">
    <input type="radio" name="radio-7" class="radio radio-success">
  </div>
  <div>
    <input type="radio" name="radio-8" checked="checked" class="radio radio-warning">
    <input type="radio" name="radio-8" class="radio radio-warning">
  </div>
  <div>
    <input type="radio" name="radio-9" checked="checked" class="radio radio-info">
    <input type="radio" name="radio-9" class="radio radio-info">
  </div>
  <div>
    <input type="radio" name="radio-10" checked="checked" class="radio radio-error">
    <input type="radio" name="radio-10" class="radio radio-error">
  </div>
</div>

test_func = test_radio_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_radio_disabled_fasthtml_examples

 test_radio_disabled_fasthtml_examples ()

Test disabled radio button examples from daisyUI v5 documentation.

def test_radio_disabled_fasthtml_examples():
    """Test disabled radio button examples from daisyUI v5 documentation."""
    from fasthtml.common import Input, Div
    
    # Disabled radio buttons
    disabled_checked = Input(
        type="radio",
        name="radio-11",
        cls=str(radio),
        disabled=True,
        checked="checked"
    )
    assert disabled_checked.tag == "input"
    assert disabled_checked.attrs['type'] == "radio"
    assert disabled_checked.attrs['name'] == "radio-11"
    assert disabled_checked.attrs['class'] == "radio"
    assert disabled_checked.attrs['disabled'] == True
    assert disabled_checked.attrs['checked'] == "checked"
    
    disabled_unchecked = Input(
        type="radio",
        name="radio-11",
        cls=str(radio),
        disabled=True
    )
    assert disabled_unchecked.tag == "input"
    assert disabled_unchecked.attrs['type'] == "radio"
    assert disabled_unchecked.attrs['name'] == "radio-11"
    assert disabled_unchecked.attrs['class'] == "radio"
    assert disabled_unchecked.attrs['disabled'] == True
    assert 'checked' not in disabled_unchecked.attrs
    
    # Return both disabled radio buttons in a Div
    return Div(
        disabled_checked,
        disabled_unchecked
    )

# Run the tests
test_radio_disabled_fasthtml_examples()

<div>
  <input type="radio" name="radio-11" disabled checked="checked" class="radio">
  <input type="radio" name="radio-11" disabled class="radio">
</div>

test_func = test_radio_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_radio_custom_colors_fasthtml_examples

 test_radio_custom_colors_fasthtml_examples ()

Test radio buttons with custom colors from daisyUI v5 documentation.

def test_radio_custom_colors_fasthtml_examples():
    """Test radio buttons with custom colors from daisyUI v5 documentation."""
    from fasthtml.common import Input, Div
    from cjm_fasthtml_tailwind.utilities.backgrounds import bg
    from cjm_fasthtml_tailwind.utilities.borders import border_color
    from cjm_fasthtml_tailwind.utilities.typography import font_size, font_weight, font_family, text_color
    
    # Radio with custom red colors
    red_radio = Input(
        type="radio",
        name="radio-12",
        checked="checked",
        cls=combine_classes(
            radio,
            bg.red_100,
            border_color.red_300,
            bg.red_200.checked,
            text_color.red_600.checked,
            border_color.red_600.checked
        )
    )
    assert red_radio.tag == "input"
    assert red_radio.attrs['type'] == "radio"
    assert red_radio.attrs['name'] == "radio-12"
    assert red_radio.attrs['checked'] == "checked"
    assert "radio" in red_radio.attrs['class']
    assert "bg-red-100" in red_radio.attrs['class']
    assert "border-red-300" in red_radio.attrs['class']
    assert "checked:bg-red-200" in red_radio.attrs['class']
    assert "checked:text-red-600" in red_radio.attrs['class']
    assert "checked:border-red-600" in red_radio.attrs['class']
    
    # Radio with custom blue colors
    blue_radio = Input(
        type="radio",
        name="radio-12",
        checked="checked",
        cls=combine_classes(
            radio,
            bg.blue_100,
            border_color.blue_300,
            bg.blue_200.checked,
            text_color.blue_600.checked,
            border_color.blue_600.checked
        )
    )
    assert blue_radio.tag == "input"
    assert blue_radio.attrs['type'] == "radio"
    assert blue_radio.attrs['name'] == "radio-12"
    assert blue_radio.attrs['checked'] == "checked"
    assert "radio" in blue_radio.attrs['class']
    assert "bg-blue-100" in blue_radio.attrs['class']
    assert "border-blue-300" in blue_radio.attrs['class']
    assert "checked:bg-blue-200" in blue_radio.attrs['class']
    assert "checked:text-blue-600" in blue_radio.attrs['class']
    assert "checked:border-blue-600" in blue_radio.attrs['class']
    
    # Return both custom colored radio buttons in a Div
    return Div(
        red_radio,
        blue_radio
    )

# Run the tests
test_radio_custom_colors_fasthtml_examples()

<div>
  <input type="radio" name="radio-12" checked="checked" class="radio bg-red-100 border-red-300 checked:bg-red-200 checked:text-red-600 checked:border-red-600">
  <input type="radio" name="radio-12" checked="checked" class="radio bg-blue-100 border-blue-300 checked:bg-blue-200 checked:text-blue-600 checked:border-blue-600">
</div>

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