select

Select is used to pick a value from a list of options.

Base Select

select = SingleValueFactory("select", "Base select component for <select> element") # Base select component

Select Styles

select_styles = enums_to_simple_factory(select, [GhostStyle]) # select style variants

Select Colors

select_colors = enums_to_simple_factory(select, [SemanticColorBrand, SemanticColorStatus], "select color variants using daisyUI semantic colors") # select color variants

Select Sizes

select_sizes = enums_to_simple_factory(select, [DaisyUINamedSize], "select size variants from extra small to extra large") # select size variants

Select Test Examples

---

source

test_select_basic_examples

 test_select_basic_examples ()

Test basic select utilities.

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

# Run the tests
test_select_basic_examples()

---

source

test_select_styles_examples

 test_select_styles_examples ()

Test select style variants.

def test_select_styles_examples():
    """Test select style variants."""
    assert str(select_styles.ghost) == "select-ghost"

# Run the tests
test_select_styles_examples()

---

source

test_select_colors_examples

 test_select_colors_examples ()

Test select color variants.

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

# Run the tests
test_select_colors_examples()

---

source

test_select_sizes_examples

 test_select_sizes_examples ()

Test select size variants.

def test_select_sizes_examples():
    """Test select size variants."""
    assert str(select_sizes.xs) == "select-xs"
    assert str(select_sizes.sm) == "select-sm"
    assert str(select_sizes.md) == "select-md"
    assert str(select_sizes.lg) == "select-lg"
    assert str(select_sizes.xl) == "select-xl"
    
    # With responsive modifiers
    assert str(select_sizes.xs.sm) == "sm:select-xs"
    assert str(select_sizes.lg.md) == "md:select-lg"

# Run the tests
test_select_sizes_examples()

---

source

test_select_basic_fasthtml_examples

 test_select_basic_fasthtml_examples ()

Test basic select example from daisyUI v5 documentation.

def test_select_basic_fasthtml_examples():
    """Test basic select example from daisyUI v5 documentation."""
    from fasthtml.common import Select, Option, Div
    
    # Basic select
    basic_select = Select(
        Option("Pick a color", disabled=True, selected=True),
        Option("Crimson"),
        Option("Amber"),
        Option("Velvet"),
        cls=str(select)
    )
    
    # Verify structure
    assert basic_select.tag == "select"
    assert basic_select.attrs['class'] == "select"
    
    # Verify options
    assert len(basic_select.children) == 4
    
    # First option (disabled and selected)
    first_option = basic_select.children[0]
    assert first_option.tag == "option"
    assert first_option.attrs.get('disabled') is True
    assert first_option.attrs.get('selected') is True
    assert first_option.children[0] == "Pick a color"
    
    # Other options
    assert basic_select.children[1].children[0] == "Crimson"
    assert basic_select.children[2].children[0] == "Amber"
    assert basic_select.children[3].children[0] == "Velvet"
    
    return basic_select

# Run the tests
test_select_basic_fasthtml_examples()

<select class="select"><option disabled selected>Pick a color</option><option>Crimson</option><option>Amber</option><option>Velvet</option></select>

test_func = test_select_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_select_colors_fasthtml_examples

 test_select_colors_fasthtml_examples ()

Test select with different color variations from daisyUI v5 documentation.

def test_select_colors_fasthtml_examples():
    """Test select with different color variations from daisyUI v5 documentation."""
    from fasthtml.common import Select, Option, Div
    
    # Primary color
    primary_select = Select(
        Option("Pick a text editor", disabled=True, selected=True),
        Option("VScode"),
        Option("VScode fork"),
        Option("Another VScode fork"),
        cls=combine_classes(select, select_colors.primary)
    )
    assert "select" in primary_select.attrs['class']
    assert "select-primary" in primary_select.attrs['class']
    assert primary_select.children[0].children[0] == "Pick a text editor"
    
    # Secondary color
    secondary_select = Select(
        Option("Pick a language", disabled=True, selected=True),
        Option("Zig"),
        Option("Go"),
        Option("Rust"),
        cls=combine_classes(select, select_colors.secondary)
    )
    assert "select-secondary" in secondary_select.attrs['class']
    assert secondary_select.children[0].children[0] == "Pick a language"
    
    # Accent color
    accent_select = Select(
        Option("Color scheme", selected=True, disabled=True),
        Option("Light mode"),
        Option("Dark mode"),
        Option("System"),
        cls=combine_classes(select, select_colors.accent)
    )
    assert "select-accent" in accent_select.attrs['class']
    assert accent_select.children[0].children[0] == "Color scheme"
    
    # Neutral color
    neutral_select = Select(
        Option("Server location", disabled=True, selected=True),
        Option("North America"),
        Option("EU west"),
        Option("South East Asia"),
        cls=combine_classes(select, select_colors.neutral)
    )
    assert "select-neutral" in neutral_select.attrs['class']
    assert neutral_select.children[0].children[0] == "Server location"
    
    # Info color
    info_select = Select(
        Option("Pick a Framework", disabled=True, selected=True),
        Option("React"),
        Option("Vue"),
        Option("Angular"),
        cls=combine_classes(select, select_colors.info)
    )
    assert "select-info" in info_select.attrs['class']
    assert info_select.children[0].children[0] == "Pick a Framework"
    
    # Success color
    success_select = Select(
        Option("Pick a Runtime", disabled=True, selected=True),
        Option("npm"),
        Option("Bun"),
        Option("yarn"),
        cls=combine_classes(select, select_colors.success)
    )
    assert "select-success" in success_select.attrs['class']
    assert success_select.children[0].children[0] == "Pick a Runtime"
    
    # Warning color
    warning_select = Select(
        Option("Pick an OS", disabled=True, selected=True),
        Option("Windows"),
        Option("MacOS"),
        Option("Linux"),
        cls=combine_classes(select, select_colors.warning)
    )
    assert "select-warning" in warning_select.attrs['class']
    assert warning_select.children[0].children[0] == "Pick an OS"
    
    # Error color
    error_select = Select(
        Option("Pick an AI Model", disabled=True, selected=True),
        Option("GPT-4"),
        Option("Claude"),
        Option("Llama"),
        cls=combine_classes(select, select_colors.error)
    )
    assert "select-error" in error_select.attrs['class']
    assert error_select.children[0].children[0] == "Pick an AI Model"
    
    # Return all elements in a Div
    return Div(
        primary_select,
        secondary_select,
        accent_select,
        neutral_select,
        info_select,
        success_select,
        warning_select,
        error_select
    )

# Run the tests
test_select_colors_fasthtml_examples()

<div>
<select class="select select-primary"><option disabled selected>Pick a text editor</option><option>VScode</option><option>VScode fork</option><option>Another VScode fork</option></select><select class="select select-secondary"><option disabled selected>Pick a language</option><option>Zig</option><option>Go</option><option>Rust</option></select><select class="select select-accent"><option selected disabled>Color scheme</option><option>Light mode</option><option>Dark mode</option><option>System</option></select><select class="select select-neutral"><option disabled selected>Server location</option><option>North America</option><option>EU west</option><option>South East Asia</option></select><select class="select select-info"><option disabled selected>Pick a Framework</option><option>React</option><option>Vue</option><option>Angular</option></select><select class="select select-success"><option disabled selected>Pick a Runtime</option><option>npm</option><option>Bun</option><option>yarn</option></select><select class="select select-warning"><option disabled selected>Pick an OS</option><option>Windows</option><option>MacOS</option><option>Linux</option></select><select class="select select-error"><option disabled selected>Pick an AI Model</option><option>GPT-4</option><option>Claude</option><option>Llama</option></select></div>

test_func = test_select_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_select_sizes_fasthtml_examples

 test_select_sizes_fasthtml_examples ()

Test select with different sizes from daisyUI v5 documentation.

def test_select_sizes_fasthtml_examples():
    """Test select with different sizes from daisyUI v5 documentation."""
    from fasthtml.common import Select, Option, Div
    
    # Extra small size
    xs_select = Select(
        Option("Xsmall", disabled=True, selected=True),
        Option("Xsmall Apple"),
        Option("Xsmall Orange"),
        Option("Xsmall Tomato"),
        cls=combine_classes(select, select_sizes.xs)
    )
    assert "select" in xs_select.attrs['class']
    assert "select-xs" in xs_select.attrs['class']
    assert xs_select.children[0].children[0] == "Xsmall"
    
    # Small size
    sm_select = Select(
        Option("Small", disabled=True, selected=True),
        Option("Small Apple"),
        Option("Small Orange"),
        Option("Small Tomato"),
        cls=combine_classes(select, select_sizes.sm)
    )
    assert "select-sm" in sm_select.attrs['class']
    assert sm_select.children[0].children[0] == "Small"
    
    # Medium size
    md_select = Select(
        Option("Medium", disabled=True, selected=True),
        Option("Medium Apple"),
        Option("Medium Orange"),
        Option("Medium Tomato"),
        cls=combine_classes(select, select_sizes.md)
    )
    assert "select-md" in md_select.attrs['class']
    assert md_select.children[0].children[0] == "Medium"
    
    # Large size
    lg_select = Select(
        Option("Large", disabled=True, selected=True),
        Option("Large Apple"),
        Option("Large Orange"),
        Option("Large Tomato"),
        cls=combine_classes(select, select_sizes.lg)
    )
    assert "select-lg" in lg_select.attrs['class']
    assert lg_select.children[0].children[0] == "Large"
    
    # Extra large size
    xl_select = Select(
        Option("Xlarge", disabled=True, selected=True),
        Option("Xlarge Apple"),
        Option("Xlarge Orange"),
        Option("Xlarge Tomato"),
        cls=combine_classes(select, select_sizes.xl)
    )
    assert "select-xl" in xl_select.attrs['class']
    assert xl_select.children[0].children[0] == "Xlarge"
    
    # Return all elements in a Div
    return Div(
        xs_select,
        sm_select,
        md_select,
        lg_select,
        xl_select
    )

# Run the tests
test_select_sizes_fasthtml_examples()

<div>
<select class="select select-xs"><option disabled selected>Xsmall</option><option>Xsmall Apple</option><option>Xsmall Orange</option><option>Xsmall Tomato</option></select><select class="select select-sm"><option disabled selected>Small</option><option>Small Apple</option><option>Small Orange</option><option>Small Tomato</option></select><select class="select select-md"><option disabled selected>Medium</option><option>Medium Apple</option><option>Medium Orange</option><option>Medium Tomato</option></select><select class="select select-lg"><option disabled selected>Large</option><option>Large Apple</option><option>Large Orange</option><option>Large Tomato</option></select><select class="select select-xl"><option disabled selected>Xlarge</option><option>Xlarge Apple</option><option>Xlarge Orange</option><option>Xlarge Tomato</option></select></div>

test_func = test_select_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_select_special_fasthtml_examples

 test_select_special_fasthtml_examples ()

Test select with special styles (ghost, fieldset, disabled) from daisyUI v5 documentation.

def test_select_special_fasthtml_examples():
    """Test select with special styles (ghost, fieldset, disabled) from daisyUI v5 documentation."""
    from fasthtml.common import Select, Option, Div, Fieldset, Legend, Span
    from cjm_fasthtml_daisyui.components.data_input.fieldset import fieldset, fieldset_legend
    from cjm_fasthtml_daisyui.components.data_input.label import label
    
    # Ghost style (no background)
    ghost_select = Select(
        Option("Pick a font", disabled=True, selected=True),
        Option("Inter"),
        Option("Poppins"),
        Option("Raleway"),
        cls=combine_classes(select, select_styles.ghost)
    )
    assert "select" in ghost_select.attrs['class']
    assert "select-ghost" in ghost_select.attrs['class']
    assert ghost_select.children[0].children[0] == "Pick a font"
    assert ghost_select.children[1].children[0] == "Inter"
    assert ghost_select.children[2].children[0] == "Poppins"
    assert ghost_select.children[3].children[0] == "Raleway"
    
    # With fieldset and labels
    fieldset_select = Fieldset(
        Legend("Browsers", cls=str(fieldset_legend)),
        Select(
            Option("Pick a browser", disabled=True, selected=True),
            Option("Chrome"),
            Option("FireFox"),
            Option("Safari"),
            cls=str(select)
        ),
        Span("Optional", cls=str(label)),
        cls=str(fieldset)
    )
    assert fieldset_select.tag == "fieldset"
    assert fieldset_select.attrs['class'] == "fieldset"
    assert fieldset_select.children[0].tag == "legend"
    assert "fieldset-legend" in fieldset_select.children[0].attrs['class']
    assert fieldset_select.children[0].children[0] == "Browsers"
    assert fieldset_select.children[1].tag == "select"
    assert fieldset_select.children[1].attrs['class'] == "select"
    assert fieldset_select.children[1].children[0].children[0] == "Pick a browser"
    assert fieldset_select.children[2].tag == "span"
    assert fieldset_select.children[2].attrs['class'] == "label"
    assert fieldset_select.children[2].children[0] == "Optional"
    
    # Disabled select
    disabled_select = Select(
        Option("You can't touch this"),
        cls=str(select),
        disabled=True
    )
    assert disabled_select.tag == "select"
    assert disabled_select.attrs['class'] == "select"
    assert disabled_select.attrs.get('disabled') is True
    assert disabled_select.children[0].children[0] == "You can't touch this"
    
    # Return all elements in a Div
    return Div(
        ghost_select,
        fieldset_select,
        disabled_select
    )

# Run the tests
test_select_special_fasthtml_examples()

<div>
<select class="select select-ghost"><option disabled selected>Pick a font</option><option>Inter</option><option>Poppins</option><option>Raleway</option></select><fieldset class="fieldset"><legend class="fieldset-legend">Browsers</legend><select class="select"><option disabled selected>Pick a browser</option><option>Chrome</option><option>FireFox</option><option>Safari</option></select><span class="label">Optional</span></fieldset><select disabled class="select"><option>You can't touch this</option></select></div>

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