fieldset

Fieldset is a container for grouping related form elements. It includes fieldset-legend as a title and label as a description.

Base Fieldset

fieldset = SingleValueFactory("fieldset", "Base fieldset component for the fieldset container") # Base fieldset component
label = SingleValueFactory("label", "Base label component for inputs") # Base label component
fieldset_legend = SingleValueFactory("fieldset-legend", "fieldset legend part for the title of the fieldset") # fieldset legend part

Fieldset Test Examples

---

source

test_fieldset_basic_examples

 test_fieldset_basic_examples ()

Test basic fieldset utilities.

def test_fieldset_basic_examples():
    """Test basic fieldset utilities."""
    # Basic fieldset
    assert str(fieldset) == "fieldset"
    assert str(label) == "label"
    assert str(fieldset_legend) == "fieldset-legend"
    
    # Test with modifiers
    assert str(fieldset.hover) == "hover:fieldset"
    assert str(fieldset.md) == "md:fieldset"
    assert str(fieldset.dark) == "dark:fieldset"

    assert str(label.hover) == "hover:label"
    assert str(label.md) == "md:label"
    assert str(label.dark) == "dark:label"

    assert str(fieldset_legend.hover) == "hover:fieldset-legend"
    assert str(fieldset_legend.md) == "md:fieldset-legend"
    assert str(fieldset_legend.dark) == "dark:fieldset-legend"

# Run the tests
test_fieldset_basic_examples()

---

source

test_fieldset_basic_fasthtml_examples

 test_fieldset_basic_fasthtml_examples ()

Test basic fieldset with legend and label from daisyUI v5 documentation.

def test_fieldset_basic_fasthtml_examples():
    """Test basic fieldset with legend and label from daisyUI v5 documentation."""
    from fasthtml.common import Fieldset, Legend, Input, P
    from cjm_fasthtml_daisyui.components.data_input.text_input import text_input
    
    # Fieldset with legend and label
    basic_fieldset = Fieldset(
        Legend("Page title", cls=str(fieldset_legend)),
        Input(type="text", placeholder="My awesome page", cls=str(text_input)),
        P("You can edit page title later on from settings", cls=str(label)),
        cls=str(fieldset)
    )
    
    # Verify structure
    assert basic_fieldset.tag == "fieldset"
    assert basic_fieldset.attrs['class'] == "fieldset"
    
    # Verify legend
    legend_element = basic_fieldset.children[0]
    assert legend_element.tag == "legend"
    assert legend_element.attrs['class'] == "fieldset-legend"
    assert legend_element.children[0] == "Page title"
    
    # Verify input
    input_element = basic_fieldset.children[1]
    assert input_element.tag == "input"
    assert input_element.attrs['type'] == "text"
    assert input_element.attrs['placeholder'] == "My awesome page"
    assert input_element.attrs['class'] == "input"
    
    # Verify label
    label_element = basic_fieldset.children[2]
    assert label_element.tag == "p"
    assert label_element.attrs['class'] == "label"
    assert label_element.children[0] == "You can edit page title later on from settings"
    
    return basic_fieldset

# Run the tests
test_fieldset_basic_fasthtml_examples()

<fieldset class="fieldset"><legend class="fieldset-legend">Page title</legend>  <input type="text" placeholder="My awesome page" class="input">
  <p class="label">You can edit page title later on from settings</p>
</fieldset>

test_func = test_fieldset_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_fieldset_with_background_fasthtml_examples

 test_fieldset_with_background_fasthtml_examples ()

Test fieldset with background and border from daisyUI v5 documentation.

def test_fieldset_with_background_fasthtml_examples():
    """Test fieldset with background and border from daisyUI v5 documentation."""
    from fasthtml.common import Fieldset, Legend, Input, P
    from cjm_fasthtml_tailwind.utilities.sizing import w
    from cjm_fasthtml_tailwind.utilities.borders import border
    from cjm_fasthtml_tailwind.utilities.spacing import p
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui, border_dui
    from cjm_fasthtml_daisyui.utilities.border_radius import border_radius
    from cjm_fasthtml_daisyui.components.data_input.text_input import text_input
    
    # Fieldset with background and border
    styled_fieldset = Fieldset(
        Legend("Page title", cls=str(fieldset_legend)),
        Input(type="text", placeholder="My awesome page", cls=str(text_input)),
        P("You can edit page title later on from settings", cls=str(label)),
        cls=combine_classes(
            fieldset,
            bg_dui.base_200,
            border_dui.base_300,
            border_radius.box,
            w.xs,
            border,
            p._4
        )
    )
    
    # Verify structure
    assert styled_fieldset.tag == "fieldset"
    assert "fieldset" in styled_fieldset.attrs['class']
    assert "bg-base-200" in styled_fieldset.attrs['class']
    assert "border-base-300" in styled_fieldset.attrs['class']
    assert "rounded-box" in styled_fieldset.attrs['class']
    assert "w-xs" in styled_fieldset.attrs['class']
    assert "border" in styled_fieldset.attrs['class']
    assert "p-4" in styled_fieldset.attrs['class']
    
    # Verify legend
    legend_element = styled_fieldset.children[0]
    assert legend_element.tag == "legend"
    assert legend_element.attrs['class'] == "fieldset-legend"
    assert legend_element.children[0] == "Page title"
    
    # Verify input
    input_element = styled_fieldset.children[1]
    assert input_element.tag == "input"
    assert input_element.attrs['type'] == "text"
    assert input_element.attrs['placeholder'] == "My awesome page"
    assert input_element.attrs['class'] == "input"
    
    # Verify label
    label_element = styled_fieldset.children[2]
    assert label_element.tag == "p"
    assert label_element.attrs['class'] == "label"
    assert label_element.children[0] == "You can edit page title later on from settings"
    
    return styled_fieldset

# Run the tests
test_fieldset_with_background_fasthtml_examples()

<fieldset class="fieldset bg-base-200 border-base-300 rounded-box w-xs &lt;cjm_fasthtml_tailwind.utilities.borders.BorderWidthFactory object at 0x7f99fd6a9290&gt; p-4"><legend class="fieldset-legend">Page title</legend>  <input type="text" placeholder="My awesome page" class="input">
  <p class="label">You can edit page title later on from settings</p>
</fieldset>

test_func = test_fieldset_with_background_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_fieldset_multiple_inputs_fasthtml_examples

 test_fieldset_multiple_inputs_fasthtml_examples ()

Test fieldset with multiple inputs from daisyUI v5 documentation.

def test_fieldset_multiple_inputs_fasthtml_examples():
    """Test fieldset with multiple inputs from daisyUI v5 documentation."""
    from fasthtml.common import Fieldset, Legend, Input, Label
    from cjm_fasthtml_tailwind.utilities.sizing import w
    from cjm_fasthtml_tailwind.utilities.borders import border
    from cjm_fasthtml_tailwind.utilities.spacing import p
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui, border_dui
    from cjm_fasthtml_daisyui.utilities.border_radius import border_radius
    from cjm_fasthtml_daisyui.components.data_input.text_input import text_input
    
    # Fieldset with multiple inputs
    multiple_inputs_fieldset = Fieldset(
        Legend("Page details", cls=str(fieldset_legend)),
        Label("Title", cls=str(label)),
        Input(type="text", placeholder="My awesome page", cls=str(text_input)),
        Label("Slug", cls=str(label)),
        Input(type="text", placeholder="my-awesome-page", cls=str(text_input)),
        Label("Author", cls=str(label)),
        Input(type="text", placeholder="Name", cls=str(text_input)),
        cls=combine_classes(
            fieldset,
            bg_dui.base_200,
            border_dui.base_300,
            border_radius.box,
            w.xs,
            border,
            p._4
        )
    )
    
    # Verify structure
    assert multiple_inputs_fieldset.tag == "fieldset"
    assert "fieldset" in multiple_inputs_fieldset.attrs['class']
    assert "bg-base-200" in multiple_inputs_fieldset.attrs['class']
    assert "border-base-300" in multiple_inputs_fieldset.attrs['class']
    assert "rounded-box" in multiple_inputs_fieldset.attrs['class']
    assert "w-xs" in multiple_inputs_fieldset.attrs['class']
    assert "border" in multiple_inputs_fieldset.attrs['class']
    assert "p-4" in multiple_inputs_fieldset.attrs['class']
    
    # Verify legend
    legend_element = multiple_inputs_fieldset.children[0]
    assert legend_element.tag == "legend"
    assert legend_element.attrs['class'] == "fieldset-legend"
    assert legend_element.children[0] == "Page details"
    
    # Verify first label and input
    label1 = multiple_inputs_fieldset.children[1]
    assert label1.tag == "label"
    assert label1.attrs['class'] == "label"
    assert label1.children[0] == "Title"
    
    input1 = multiple_inputs_fieldset.children[2]
    assert input1.tag == "input"
    assert input1.attrs['type'] == "text"
    assert input1.attrs['placeholder'] == "My awesome page"
    assert input1.attrs['class'] == "input"
    
    # Verify second label and input
    label2 = multiple_inputs_fieldset.children[3]
    assert label2.tag == "label"
    assert label2.attrs['class'] == "label"
    assert label2.children[0] == "Slug"
    
    input2 = multiple_inputs_fieldset.children[4]
    assert input2.tag == "input"
    assert input2.attrs['type'] == "text"
    assert input2.attrs['placeholder'] == "my-awesome-page"
    assert input2.attrs['class'] == "input"
    
    # Verify third label and input
    label3 = multiple_inputs_fieldset.children[5]
    assert label3.tag == "label"
    assert label3.attrs['class'] == "label"
    assert label3.children[0] == "Author"
    
    input3 = multiple_inputs_fieldset.children[6]
    assert input3.tag == "input"
    assert input3.attrs['type'] == "text"
    assert input3.attrs['placeholder'] == "Name"
    assert input3.attrs['class'] == "input"
    
    return multiple_inputs_fieldset

# Run the tests
test_fieldset_multiple_inputs_fasthtml_examples()

<fieldset class="fieldset bg-base-200 border-base-300 rounded-box w-xs &lt;cjm_fasthtml_tailwind.utilities.borders.BorderWidthFactory object at 0x7f99fd6a9290&gt; p-4"><legend class="fieldset-legend">Page details</legend><label class="label">Title</label>  <input type="text" placeholder="My awesome page" class="input">
<label class="label">Slug</label>  <input type="text" placeholder="my-awesome-page" class="input">
<label class="label">Author</label>  <input type="text" placeholder="Name" class="input">
</fieldset>

test_func = test_fieldset_multiple_inputs_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_fieldset_join_items_fasthtml_examples

 test_fieldset_join_items_fasthtml_examples ()

Test fieldset with multiple join items from daisyUI v5 documentation.

def test_fieldset_join_items_fasthtml_examples():
    """Test fieldset with multiple join items from daisyUI v5 documentation."""
    from fasthtml.common import Fieldset, Legend, Input, Button, Div
    from cjm_fasthtml_tailwind.utilities.sizing import w
    from cjm_fasthtml_tailwind.utilities.borders import border
    from cjm_fasthtml_tailwind.utilities.spacing import p
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui, border_dui
    from cjm_fasthtml_daisyui.utilities.border_radius import border_radius
    from cjm_fasthtml_daisyui.components.data_input.text_input import text_input
    from cjm_fasthtml_daisyui.components.actions.button import btn
    from cjm_fasthtml_daisyui.components.layout.join import join, join_item
    
    # Fieldset with join items
    join_fieldset = Fieldset(
        Legend("Settings", cls=str(fieldset_legend)),
        Div(
            Input(type="text", placeholder="Product name", cls=combine_classes(text_input, join_item)),
            Button("save", cls=combine_classes(btn, join_item)),
            cls=str(join)
        ),
        cls=combine_classes(
            fieldset,
            bg_dui.base_200,
            border_dui.base_300,
            border_radius.box,
            w.xs,
            border,
            p._4
        )
    )
    
    # Verify structure
    assert join_fieldset.tag == "fieldset"
    assert "fieldset" in join_fieldset.attrs['class']
    assert "bg-base-200" in join_fieldset.attrs['class']
    assert "border-base-300" in join_fieldset.attrs['class']
    assert "rounded-box" in join_fieldset.attrs['class']
    assert "w-xs" in join_fieldset.attrs['class']
    assert "border" in join_fieldset.attrs['class']
    assert "p-4" in join_fieldset.attrs['class']
    
    # Verify legend
    legend_element = join_fieldset.children[0]
    assert legend_element.tag == "legend"
    assert legend_element.attrs['class'] == "fieldset-legend"
    assert legend_element.children[0] == "Settings"
    
    # Verify join container
    join_container = join_fieldset.children[1]
    assert join_container.tag == "div"
    assert join_container.attrs['class'] == "join"
    
    # Verify input in join
    join_input = join_container.children[0]
    assert join_input.tag == "input"
    assert join_input.attrs['type'] == "text"
    assert join_input.attrs['placeholder'] == "Product name"
    assert "input" in join_input.attrs['class']
    assert "join-item" in join_input.attrs['class']
    
    # Verify button in join
    join_button = join_container.children[1]
    assert join_button.tag == "button"
    assert join_button.children[0] == "save"
    assert "btn" in join_button.attrs['class']
    assert "join-item" in join_button.attrs['class']
    
    return join_fieldset

# Run the tests
test_fieldset_join_items_fasthtml_examples()

<fieldset class="fieldset bg-base-200 border-base-300 rounded-box w-xs &lt;cjm_fasthtml_tailwind.utilities.borders.BorderWidthFactory object at 0x7f99fd6a9290&gt; p-4"><legend class="fieldset-legend">Settings</legend>  <div class="join">
    <input type="text" placeholder="Product name" class="input join-item">
<button class="btn join-item">save</button>  </div>
</fieldset>

test_func = test_fieldset_join_items_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_fieldset_login_form_fasthtml_examples

 test_fieldset_login_form_fasthtml_examples ()

Test login form with fieldset from daisyUI v5 documentation.

def test_fieldset_login_form_fasthtml_examples():
    """Test login form with fieldset from daisyUI v5 documentation."""
    from fasthtml.common import Fieldset, Legend, Input, Label, Button
    from cjm_fasthtml_tailwind.utilities.sizing import w
    from cjm_fasthtml_tailwind.utilities.borders import border
    from cjm_fasthtml_tailwind.utilities.spacing import p, m
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui, border_dui
    from cjm_fasthtml_daisyui.utilities.border_radius import border_radius
    from cjm_fasthtml_daisyui.components.data_input.text_input import text_input
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_colors
    
    # Login form with fieldset
    login_fieldset = Fieldset(
        Legend("Login", cls=str(fieldset_legend)),
        Label("Email", cls=str(label)),
        Input(type="email", placeholder="Email", cls=str(text_input)),
        Label("Password", cls=str(label)),
        Input(type="password", placeholder="Password", cls=str(text_input)),
        Button("Login", cls=combine_classes(btn, btn_colors.neutral, m.t._4)),
        cls=combine_classes(
            fieldset,
            bg_dui.base_200,
            border_dui.base_300,
            border_radius.box,
            w.xs,
            border,
            p._4
        )
    )
    
    # Verify structure
    assert login_fieldset.tag == "fieldset"
    assert "fieldset" in login_fieldset.attrs['class']
    assert "bg-base-200" in login_fieldset.attrs['class']
    assert "border-base-300" in login_fieldset.attrs['class']
    assert "rounded-box" in login_fieldset.attrs['class']
    assert "w-xs" in login_fieldset.attrs['class']
    assert "border" in login_fieldset.attrs['class']
    assert "p-4" in login_fieldset.attrs['class']
    
    # Verify legend
    legend_element = login_fieldset.children[0]
    assert legend_element.tag == "legend"
    assert legend_element.attrs['class'] == "fieldset-legend"
    assert legend_element.children[0] == "Login"
    
    # Verify email label and input
    email_label = login_fieldset.children[1]
    assert email_label.tag == "label"
    assert email_label.attrs['class'] == "label"
    assert email_label.children[0] == "Email"
    
    email_input = login_fieldset.children[2]
    assert email_input.tag == "input"
    assert email_input.attrs['type'] == "email"
    assert email_input.attrs['placeholder'] == "Email"
    assert email_input.attrs['class'] == "input"
    
    # Verify password label and input
    password_label = login_fieldset.children[3]
    assert password_label.tag == "label"
    assert password_label.attrs['class'] == "label"
    assert password_label.children[0] == "Password"
    
    password_input = login_fieldset.children[4]
    assert password_input.tag == "input"
    assert password_input.attrs['type'] == "password"
    assert password_input.attrs['placeholder'] == "Password"
    assert password_input.attrs['class'] == "input"
    
    # Verify login button
    login_button = login_fieldset.children[5]
    assert login_button.tag == "button"
    assert login_button.children[0] == "Login"
    assert "btn" in login_button.attrs['class']
    assert "btn-neutral" in login_button.attrs['class']
    assert "mt-4" in login_button.attrs['class']
    
    return login_fieldset

# Run the tests
test_fieldset_login_form_fasthtml_examples()

<fieldset class="fieldset bg-base-200 border-base-300 rounded-box w-xs &lt;cjm_fasthtml_tailwind.utilities.borders.BorderWidthFactory object at 0x7f99fd6a9290&gt; p-4"><legend class="fieldset-legend">Login</legend><label class="label">Email</label>  <input type="email" placeholder="Email" class="input">
<label class="label">Password</label>  <input type="password" placeholder="Password" class="input">
<button class="btn btn-neutral mt-4">Login</button></fieldset>

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