filter

Filter is a group of radio buttons. Choosing one of the options will hide the others and shows a reset button next to the chosen option.

Base Filter

filter_dui = SingleValueFactory("filter", "Base filter component for a HTML <form> or a <div> element that includes radio buttons for filtering items") # Base filter component
filter_dui_reset = SingleValueFactory("filter-reset", "Filter reset part as an alternative to the reset button if you can't use a HTML form") # Filter reset part

Filter Test Examples

---

source

test_filter_basic_examples

 test_filter_basic_examples ()

Test basic filter utilities.

def test_filter_basic_examples():
    """Test basic filter utilities."""
    # Basic filter
    assert str(filter_dui) == "filter"
    assert str(filter_dui_reset) == "filter-reset"
    
    # Test with modifiers
    assert str(filter_dui.hover) == "hover:filter"
    assert str(filter_dui.md) == "md:filter"
    assert str(filter_dui.dark) == "dark:filter"

# Run the tests
test_filter_basic_examples()

---

source

test_filter_with_form_fasthtml_examples

 test_filter_with_form_fasthtml_examples ()

Test filter using HTML form, radio buttons and reset button from daisyUI v5 documentation.

def test_filter_with_form_fasthtml_examples():
    """Test filter using HTML form, radio buttons and reset button from daisyUI v5 documentation."""
    from fasthtml.common import Form, Input
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_modifiers
    
    # Filter using HTML form, radio buttons and reset button
    filter_form = Form(
        Input(type="reset", value="×", cls=combine_classes(btn, btn_modifiers.square)),
        Input(type="radio", name="frameworks", aria_label="Svelte", cls=str(btn)),
        Input(type="radio", name="frameworks", aria_label="Vue", cls=str(btn)),
        Input(type="radio", name="frameworks", aria_label="React", cls=str(btn)),
        cls=str(filter_dui)
    )
    
    # Verify structure
    assert filter_form.tag == "form"
    assert filter_form.attrs['class'] == "filter"
    
    # Verify reset button
    reset_btn = filter_form.children[0]
    assert reset_btn.tag == "input"
    assert reset_btn.attrs['type'] == "reset"
    assert reset_btn.attrs['value'] == "×"
    assert "btn" in reset_btn.attrs['class']
    assert "btn-square" in reset_btn.attrs['class']
    
    # Verify radio buttons
    radio_buttons = filter_form.children[1:4]
    
    # Svelte radio
    assert radio_buttons[0].tag == "input"
    assert radio_buttons[0].attrs['type'] == "radio"
    assert radio_buttons[0].attrs['name'] == "frameworks"
    assert radio_buttons[0].attrs['aria-label'] == "Svelte"
    assert radio_buttons[0].attrs['class'] == "btn"
    
    # Vue radio
    assert radio_buttons[1].tag == "input"
    assert radio_buttons[1].attrs['type'] == "radio"
    assert radio_buttons[1].attrs['name'] == "frameworks"
    assert radio_buttons[1].attrs['aria-label'] == "Vue"
    assert radio_buttons[1].attrs['class'] == "btn"
    
    # React radio
    assert radio_buttons[2].tag == "input"
    assert radio_buttons[2].attrs['type'] == "radio"
    assert radio_buttons[2].attrs['name'] == "frameworks"
    assert radio_buttons[2].attrs['aria-label'] == "React"
    assert radio_buttons[2].attrs['class'] == "btn"
    
    return filter_form

# Run the tests
test_filter_with_form_fasthtml_examples()

<form enctype="multipart/form-data" class="filter">  <input type="reset" value="×" class="btn btn-square">
  <input type="radio" name="frameworks" aria-label="Svelte" class="btn">
  <input type="radio" name="frameworks" aria-label="Vue" class="btn">
  <input type="radio" name="frameworks" aria-label="React" class="btn">
</form>

test_func = test_filter_with_form_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_filter_without_form_fasthtml_examples

 test_filter_without_form_fasthtml_examples ()

Test filter without HTML form from daisyUI v5 documentation.

def test_filter_without_form_fasthtml_examples():
    """Test filter without HTML form from daisyUI v5 documentation."""
    from fasthtml.common import Div, Input
    from cjm_fasthtml_daisyui.components.actions.button import btn
    
    # Filter without HTML form
    filter_div = Div(
        Input(type="radio", name="metaframeworks", aria_label="All", cls=combine_classes(btn, filter_dui_reset)),
        Input(type="radio", name="metaframeworks", aria_label="Sveltekit", cls=str(btn)),
        Input(type="radio", name="metaframeworks", aria_label="Nuxt", cls=str(btn)),
        Input(type="radio", name="metaframeworks", aria_label="Next.js", cls=str(btn)),
        cls=str(filter_dui)
    )
    
    # Verify structure
    assert filter_div.tag == "div"
    assert filter_div.attrs['class'] == "filter"
    
    # Verify "All" radio button with filter-reset
    all_radio = filter_div.children[0]
    assert all_radio.tag == "input"
    assert all_radio.attrs['type'] == "radio"
    assert all_radio.attrs['name'] == "metaframeworks"
    assert all_radio.attrs['aria-label'] == "All"
    assert "btn" in all_radio.attrs['class']
    assert "filter-reset" in all_radio.attrs['class']
    
    # Verify other radio buttons
    radio_buttons = filter_div.children[1:4]
    
    # Sveltekit radio
    assert radio_buttons[0].tag == "input"
    assert radio_buttons[0].attrs['type'] == "radio"
    assert radio_buttons[0].attrs['name'] == "metaframeworks"
    assert radio_buttons[0].attrs['aria-label'] == "Sveltekit"
    assert radio_buttons[0].attrs['class'] == "btn"
    
    # Nuxt radio
    assert radio_buttons[1].tag == "input"
    assert radio_buttons[1].attrs['type'] == "radio"
    assert radio_buttons[1].attrs['name'] == "metaframeworks"
    assert radio_buttons[1].attrs['aria-label'] == "Nuxt"
    assert radio_buttons[1].attrs['class'] == "btn"
    
    # Next.js radio
    assert radio_buttons[2].tag == "input"
    assert radio_buttons[2].attrs['type'] == "radio"
    assert radio_buttons[2].attrs['name'] == "metaframeworks"
    assert radio_buttons[2].attrs['aria-label'] == "Next.js"
    assert radio_buttons[2].attrs['class'] == "btn"
    
    return filter_div

# Run the tests
test_filter_without_form_fasthtml_examples()

<div class="filter">
  <input type="radio" name="metaframeworks" aria-label="All" class="btn filter-reset">
  <input type="radio" name="metaframeworks" aria-label="Sveltekit" class="btn">
  <input type="radio" name="metaframeworks" aria-label="Nuxt" class="btn">
  <input type="radio" name="metaframeworks" aria-label="Next.js" class="btn">
</div>

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