label

Label is used to provide a name or title for an input field. Label can be placed before or after the field.

Base Label

label = SingleValueFactory("label", "Base label component for styling the text next to an input field (or select)") # Base label component
floating_label = SingleValueFactory("floating-label", "Floating label component for the parent of an input field (or select) and a span that floats above the input field when the field is focused") # Base floating label component

Label Test Examples

---

source

test_label_basic_examples

 test_label_basic_examples ()

Test basic label utilities.

def test_label_basic_examples():
    """Test basic label utilities."""
    # Basic label
    assert str(label) == "label"
    assert str(floating_label) == "floating-label"
    
    # Test with modifiers
    assert str(label.hover) == "hover:label"
    assert str(label.md) == "md:label"
    assert str(label.dark) == "dark:label"

    # Test with modifiers
    assert str(floating_label.hover) == "hover:floating-label"
    assert str(floating_label.md) == "md:floating-label"
    assert str(floating_label.dark) == "dark:floating-label"

# Run the tests
test_label_basic_examples()

---

source

test_label_for_input_fasthtml_examples

 test_label_for_input_fasthtml_examples ()

Test label for input examples from daisyUI v5 documentation.

def test_label_for_input_fasthtml_examples():
    """Test label for input examples from daisyUI v5 documentation."""
    from fasthtml.common import Label, Span, Input
    from cjm_fasthtml_daisyui.components.data_input.text_input import text_input
    
    # Label for input at the start
    label_start = Label(
        Span("https://", cls=str(label)),
        Input(type="text", placeholder="URL"),
        cls=str(text_input)
    )
    
    # Verify structure
    assert label_start.tag == "label"
    assert "input" in label_start.attrs['class']
    
    # Verify span element
    span_element = label_start.children[0]
    assert span_element.tag == "span"
    assert "label" in span_element.attrs['class']
    assert span_element.children[0] == "https://"
    
    # Verify input element
    input_element = label_start.children[1]
    assert input_element.tag == "input"
    assert input_element.attrs['type'] == "text"
    assert input_element.attrs['placeholder'] == "URL"
    
    # Label for input at the end
    label_end = Label(
        Input(type="text", placeholder="domain name"),
        Span(".com", cls=str(label)),
        cls=str(text_input)
    )
    
    # Verify structure
    assert label_end.tag == "label"
    assert "input" in label_end.attrs['class']
    
    # Verify input element comes first
    input_element = label_end.children[0]
    assert input_element.tag == "input"
    assert input_element.attrs['type'] == "text"
    assert input_element.attrs['placeholder'] == "domain name"
    
    # Verify span element comes second
    span_element = label_end.children[1]
    assert span_element.tag == "span"
    assert "label" in span_element.attrs['class']
    assert span_element.children[0] == ".com"
    
    return Div(label_start, label_end)

# Run the tests
test_label_for_input_fasthtml_examples()

<div>
<label class="input"><span class="label">https://</span>    <input type="text" placeholder="URL">
</label><label class="input">    <input type="text" placeholder="domain name">
<span class="label">.com</span></label></div>

test_func = test_label_for_input_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_label_for_select_and_date_fasthtml_examples

 test_label_for_select_and_date_fasthtml_examples ()

Test label for select and date input examples from daisyUI v5 documentation.

def test_label_for_select_and_date_fasthtml_examples():
    """Test label for select and date input examples from daisyUI v5 documentation."""
    from fasthtml.common import Label, Span, Select, Option, Input
    from cjm_fasthtml_daisyui.components.data_input.select import select
    from cjm_fasthtml_daisyui.components.data_input.text_input import text_input
    
    # Label for select
    label_select = Label(
        Span("Type", cls=str(label)),
        Select(
            Option("Personal"),
            Option("Business")
        ),
        cls=str(select)
    )
    
    # Verify structure
    assert label_select.tag == "label"
    assert "select" in label_select.attrs['class']
    
    # Verify span element
    span_element = label_select.children[0]
    assert span_element.tag == "span"
    assert "label" in span_element.attrs['class']
    assert span_element.children[0] == "Type"
    
    # Verify select element
    select_element = label_select.children[1]
    assert select_element.tag == "select"
    assert len(select_element.children) == 2
    
    # Verify options
    option1 = select_element.children[0]
    assert option1.tag == "option"
    assert option1.children[0] == "Personal"
    
    option2 = select_element.children[1]
    assert option2.tag == "option"
    assert option2.children[0] == "Business"
    
    # Label for date input
    label_date = Label(
        Span("Publish date", cls=str(label)),
        Input(type="date"),
        cls=str(text_input)
    )
    
    # Verify structure
    assert label_date.tag == "label"
    assert "input" in label_date.attrs['class']
    
    # Verify span element
    span_element = label_date.children[0]
    assert span_element.tag == "span"
    assert "label" in span_element.attrs['class']
    assert span_element.children[0] == "Publish date"
    
    # Verify input element
    input_element = label_date.children[1]
    assert input_element.tag == "input"
    assert input_element.attrs['type'] == "date"
    
    return Div(label_select, label_date)

# Run the tests
test_label_for_select_and_date_fasthtml_examples()

<div>
<label class="select"><span class="label">Type</span><select><option>Personal</option><option>Business</option></select></label><label class="input"><span class="label">Publish date</span>    <input type="date">
</label></div>

test_func = test_label_for_select_and_date_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_floating_label_fasthtml_examples

 test_floating_label_fasthtml_examples ()

Test floating label example from daisyUI v5 documentation.

def test_floating_label_fasthtml_examples():
    """Test floating label example from daisyUI v5 documentation."""
    from fasthtml.common import Label, Span, Input
    from cjm_fasthtml_daisyui.components.data_input.text_input import text_input, text_input_sizes
    
    # Floating Label
    floating_label_elem = Label(
        Span("Your Email"),
        Input(type="text", placeholder="[email protected]", cls=combine_classes(text_input, text_input_sizes.md)),
        cls=str(floating_label)
    )
    
    # Verify structure
    assert floating_label_elem.tag == "label"
    assert "floating-label" in floating_label_elem.attrs['class']
    
    # Verify span element (comes first in HTML, but order in FastHTML may vary)
    span_element = floating_label_elem.children[0]
    assert span_element.tag == "span"
    assert span_element.children[0] == "Your Email"
    
    # Verify input element
    input_element = floating_label_elem.children[1]
    assert input_element.tag == "input"
    assert input_element.attrs['type'] == "text"
    assert input_element.attrs['placeholder'] == "[email protected]"
    assert "input" in input_element.attrs['class']
    assert "input-md" in input_element.attrs['class']
    
    return floating_label_elem

# Run the tests
test_floating_label_fasthtml_examples()

<label class="floating-label"><span>Your Email</span>  <input type="text" placeholder="[email protected]" class="input input-md">
</label>

test_func = test_floating_label_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_floating_label_sizes_fasthtml_examples

 test_floating_label_sizes_fasthtml_examples ()

Test floating label with different sizes from daisyUI v5 documentation.

def test_floating_label_sizes_fasthtml_examples():
    """Test floating label with different sizes from daisyUI v5 documentation."""
    from fasthtml.common import Label, Span, Input, Div
    from cjm_fasthtml_daisyui.components.data_input.text_input import text_input, text_input_sizes
    
    # Floating Label - Extra Small
    floating_xs = Label(
        Input(type="text", placeholder="Extra Small", cls=combine_classes(text_input, text_input_sizes.xs)),
        Span("Extra Small"),
        cls=str(floating_label)
    )
    
    # Verify extra small
    assert floating_xs.tag == "label"
    assert "floating-label" in floating_xs.attrs['class']
    input_elem = floating_xs.children[0]
    assert input_elem.tag == "input"
    assert input_elem.attrs['placeholder'] == "Extra Small"
    assert "input-xs" in input_elem.attrs['class']
    span_elem = floating_xs.children[1]
    assert span_elem.tag == "span"
    assert span_elem.children[0] == "Extra Small"
    
    # Floating Label - Small
    floating_sm = Label(
        Input(type="text", placeholder="Small", cls=combine_classes(text_input, text_input_sizes.sm)),
        Span("Small"),
        cls=str(floating_label)
    )
    
    # Verify small
    assert "floating-label" in floating_sm.attrs['class']
    assert floating_sm.children[0].attrs['placeholder'] == "Small"
    assert "input-sm" in floating_sm.children[0].attrs['class']
    assert floating_sm.children[1].children[0] == "Small"
    
    # Floating Label - Medium
    floating_md = Label(
        Input(type="text", placeholder="Medium", cls=combine_classes(text_input, text_input_sizes.md)),
        Span("Medium"),
        cls=str(floating_label)
    )
    
    # Verify medium
    assert "floating-label" in floating_md.attrs['class']
    assert floating_md.children[0].attrs['placeholder'] == "Medium"
    assert "input-md" in floating_md.children[0].attrs['class']
    assert floating_md.children[1].children[0] == "Medium"
    
    # Floating Label - Large
    floating_lg = Label(
        Input(type="text", placeholder="Large", cls=combine_classes(text_input, text_input_sizes.lg)),
        Span("Large"),
        cls=str(floating_label)
    )
    
    # Verify large
    assert "floating-label" in floating_lg.attrs['class']
    assert floating_lg.children[0].attrs['placeholder'] == "Large"
    assert "input-lg" in floating_lg.children[0].attrs['class']
    assert floating_lg.children[1].children[0] == "Large"
    
    # Floating Label - Extra Large
    floating_xl = Label(
        Input(type="text", placeholder="Extra Large", cls=combine_classes(text_input, text_input_sizes.xl)),
        Span("Extra Large"),
        cls=str(floating_label)
    )
    
    # Verify extra large
    assert "floating-label" in floating_xl.attrs['class']
    assert floating_xl.children[0].attrs['placeholder'] == "Extra Large"
    assert "input-xl" in floating_xl.children[0].attrs['class']
    assert floating_xl.children[1].children[0] == "Extra Large"
    
    return Div(
        floating_xs,
        floating_sm,
        floating_md,
        floating_lg,
        floating_xl
    )

# Run the tests
test_floating_label_sizes_fasthtml_examples()

<div>
<label class="floating-label">    <input type="text" placeholder="Extra Small" class="input input-xs">
<span>Extra Small</span></label><label class="floating-label">    <input type="text" placeholder="Small" class="input input-sm">
<span>Small</span></label><label class="floating-label">    <input type="text" placeholder="Medium" class="input input-md">
<span>Medium</span></label><label class="floating-label">    <input type="text" placeholder="Large" class="input input-lg">
<span>Large</span></label><label class="floating-label">    <input type="text" placeholder="Extra Large" class="input input-xl">
<span>Extra Large</span></label></div>

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