Select

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

Class name
Type
select
Component
For <select> element
select-ghost
Style
ghost style
select-neutral
Color
neutral color
select-primary
Color
primary color
select-secondary
Color
secondary color
select-accent
Color
accent color
select-info
Color
info color
select-success
Color
success color
select-warning
Color
warning color
select-error
Color
error color
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

Select

<select class="$$select">
  <option disabled selected>Pick a color</option>
  <option>Crimson</option>
  <option>Amber</option>
  <option>Velvet</option>
</select>
<select defaultValue="Pick a color" className="$$select">
  <option disabled={true}>Pick a color</option>
  <option>Crimson</option>
  <option>Amber</option>
  <option>Velvet</option>
</select>

Ghost (no background)

<select class="$$select $$select-ghost">
  <option disabled selected>Pick a font</option>
  <option>Inter</option>
  <option>Poppins</option>
  <option>Raleway</option>
</select>
<select defaultValue="Pick a font" class="$$select $$select-ghost">
  <option disabled={true}>Pick a font</option>
  <option>Inter</option>
  <option>Poppins</option>
  <option>Raleway</option>
</select>

With fieldset and fieldset-labels

Browsers Optional
<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="$$fieldset-label">Optional</span>
</fieldset>
<fieldset class="$$fieldset">
  <legend class="$$fieldset-legend">Browsers</legend>
  <select defaultValue="Pick a browser" class="$$select">
    <option disabled={true}>Pick a browser</option>
    <option>Chrome</option>
    <option>FireFox</option>
    <option>Safari</option>
  </select>
  <span class="$$fieldset-label">Optional</span>
</fieldset>

Primary color

<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 defaultValue="Pick a text editor" class="$$select $$select-primary">
  <option disabled={true}>Pick a text editor</option>
  <option>VScode</option>
  <option>VScode fork</option>
  <option>Another VScode fork</option>
</select>

Secondary color

<select class="$$select $$select-secondary">
  <option disabled selected>Pick a language</option>
  <option>Zig</option>
  <option>Go</option>
  <option>Rust</option>
</select>
<select defaultValue="Pick a language" class="$$select $$select-secondary">
  <option disabled={true}>Pick a language</option>
  <option>Zig</option>
  <option>Go</option>
  <option>Rust</option>
</select>

Accent color

<select class="$$select $$select-accent">
  <option selected disabled>Color scheme</option>
  <option>Light mode</option>
  <option>Dark mode</option>
  <option>System</option>
</select>
<select defaultValue="Color scheme" class="$$select $$select-accent">
  <option disabled={true}>Color scheme</option>
  <option>Light mode</option>
  <option>Dark mode</option>
  <option>System</option>
</select>

Neutral color

<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 defaultValue="Server location" class="$$select $$select-neutral">
  <option disabled={true}>Server location</option>
  <option>North America</option>
  <option>EU west</option>
  <option>South East Asia</option>
</select>

Info color

<select class="$$select $$select-info">
  <option disabled selected>Pick a Framework</option>
  <option>React</option>
  <option>Vue</option>
  <option>Angular</option>
</select>
<select defaultValue="Pick a Framework" className="$$select $$select-info">
  <option disabled={true}>Pick a Framework</option>
  <option>React</option>
  <option>Vue</option>
  <option>Angular</option>
</select>

Success color

<select class="$$select $$select-success">
  <option disabled selected>Pick a Runtime</option>
  <option>npm</option>
  <option>Bun</option>
  <option>yarn</option>
</select>
<select defaultValue="Pick a Runtime" className="$$select $$select-success">
  <option disabled={true}>Pick a Runtime</option>
  <option>npm</option>
  <option>Bun</option>
  <option>yarn</option>
</select>

Warning color

<select class="$$select $$select-warning">
  <option disabled selected>Pick an OS</option>
  <option>Windows</option>
  <option>MacOS</option>
  <option>Linux</option>
</select>
<select defaultValue="Pick an OS" className="$$select $$select-warning">
  <option disabled={true}>Pick an OS</option>
  <option>Windows</option>
  <option>MacOS</option>
  <option>Linux</option>
</select>

Error color

<select class="$$select $$select-error">
  <option disabled selected>Pick an AI Model</option>
  <option>GPT-4</option>
  <option>Claude</option>
  <option>Llama</option>
</select>
<select defaultValue="Pick an AI Model" className="$$select $$select-error">
  <option disabled={true}>Pick an AI Model</option>
  <option>GPT-4</option>
  <option>Claude</option>
  <option>Llama</option>
</select>

Sizes

<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>
<select defaultValue="Xsmall" class="$$select $$select-xs">
  <option disabled={true}>Xsmall</option>
  <option>Xsmall Apple</option>
  <option>Xsmall Orange</option>
  <option>Xsmall Tomato</option>
</select>
<select defaultValue="Small" class="$$select $$select-sm">
  <option disabled={true}>Small</option>
  <option>Small Apple</option>
  <option>Small Orange</option>
  <option>Small Tomato</option>
</select>
<select defaultValue="Medium" class="$$select $$select-md">
  <option disabled={true}>Medium</option>
  <option>Medium Apple</option>
  <option>Medium Orange</option>
  <option>Medium Tomato</option>
</select>
<select defaultValue="Large" class="$$select $$select-lg">
  <option disabled={true}>Large</option>
  <option>Large Apple</option>
  <option>Large Orange</option>
  <option>Large Tomato</option>
</select>
<select defaultValue="Xlarge" class="$$select $$select-xl">
  <option disabled={true}>Xlarge</option>
  <option>Xlarge Apple</option>
  <option>Xlarge Orange</option>
  <option>Xlarge Tomato</option>
</select>

Disabled

<select class="$$select" disabled>
  <option>You can't touch this</option>
</select>
<select class="$$select" disabled={true}>
  <option>You can't touch this</option>
</select>
daisyUI store

Official daisyUI
Figma Library

Available on daisyUI store

More details