Select

Dropdown input for selecting from multiple options

Basic

Basic Select

Preview Code Auto

Select(
    Option('Pick your favorite Simpson', disabled=True, selected=True),
    Option('Homer'),
    Option('Marge'),
    Option('Bart'),
    Option('Lisa'),
    Option('Maggie'),
    cls='select'
)

Ghost Style

Preview Code Auto

Select(
    Option('Pick the best JS framework', disabled=True, selected=True),
    Option('Svelte'),
    Option('Vue'),
    Option('React'),
    cls='select select-ghost'
)

With Fieldset and Labels

Preview Code Auto

BrowsersOptional

Fieldset(
        Legend('Browsers', cls='fieldset-legend'),
        Select(
            Option('Pick a browser', disabled=True, selected=True),
            Option('Chrome'),
            Option('FireFox'),
            Option('Safari'),
            cls='select'
        ),
        Span('Optional', cls='fieldset-label'),
        cls='fieldset w-xs'
    )

Variants

Color Variants

Preview Code Auto

Select(
    Option('What is the best TV show?', disabled=True, selected=True),
    Option('Game of Thrones'),
    Option('Lost'),
    Option('Breaking Bad'),
    Option('Walking Dead'),
    cls='select select-primary'
)

Size Variants

Preview Code Auto

Select(
    Option('Extra Large', disabled=True, selected=True),
    Option('Extra Large Apple'),
    Option('Extra Large Orange'),
    Option('Extra Large Tomato'),
    cls='select select-xl'
),
Select(
    Option('Large', disabled=True, selected=True),
    Option('Large Apple'),
    Option('Large Orange'),
    Option('Large Tomato'),
    cls='select select-lg'
),
Select(
    Option('Normal', disabled=True, selected=True),
    Option('Normal Apple'),
    Option('Normal Orange'),
    Option('Normal Tomato'),
    cls='select'
),
Select(
    Option('Small', disabled=True, selected=True),
    Option('Small Apple'),
    Option('Small Orange'),
    Option('Small Tomato'),
    cls='select select-sm'
),
Select(
    Option('Tiny', disabled=True, selected=True),
    Option('Tiny Apple'),
    Option('Tiny Orange'),
    Option('Tiny Tomato'),
    cls='select select-xs'
)

States

Disabled State

Disabled select input

Preview Code Auto

Select(
    Option("You can't touch this"),
    disabled=True,
    cls='select'
)

Class Reference

Class	Type	Description
select	Component	Base class
select-ghost	Variant	Ghost style without background
select-primary	Color	Primary color variant
select-secondary	Color	Secondary color variant
select-accent	Color	Accent color variant
select-neutral	Color	Neutral color variant
select-success	Color	Success color variant
select-warning	Color	Warning color variant
select-info	Color	Info color variant
select-error	Color	Error color variant
select-xs	Size	Extra small size
select-sm	Size	Small size
select-md	Size	Medium size (default)
select-lg	Size	Large size
select-xl	Size	Extra large size

Do you have a question? ask the community

Do you see a bug? open an issue on GitHub

LLMs Context: Full Markdown | This Component

Resources: DaisyUI | TailwindCSS | FastHTML Repo