Phoenix + DaisyUI

Setup
Setup
Welcome
Welcome
Alert
Components Alert
Avatar
Components Avatar
Badge
Components Badge
Breadcrumbs
Components Breadcrumbs
Button
Components Button
Card
Components Card
Checkbox
Components Checkbox
Drawer
Components Drawer
Dropdown
Components Dropdown
Flash
Components Flash
Header
Components Header
Hero
Components Hero
Indicator
Components Indicator
Input
Components Input
Join
Components Join
List
Components List
Loading
Components Loading
Menu
Components Menu
Modal
Components Modal
Navbar
Components Navbar
Pagination
Components Pagination
Radio
Components Radio
Range
Components Range
Select
Components Select
Simple Form
Components Simple Form
Stat
Components Stat
Swap
Components Swap
Table
Components Table
Text Input
Components Text Input
Textarea
Components Textarea
Toggle
Components Toggle
Tooltip
Components Tooltip
Core Components
Examples Core Components

Select

<.select class="w-full max-w-xs">
  <option disabled selected>Pick your favorite Simpson</option>
  <option>Homer</option>
  <option>Marge</option>
  <option>Bart</option>
  <option>Lisa</option>
  <option>Maggie</option>
</.select>

Select with border Open in playground

<.select bordered class="w-full max-w-xs">
  <option disabled selected>Who shot first?</option>
  <option>Han Solo</option>
  <option>Greedo</option>
</.select>

Select ghost Open in playground

<.select class="w-full max-w-xs" ghost>
  <option disabled selected>Who shot first?</option>
  <option>Han Solo</option>
  <option>Greedo</option>
</.select>

Colors Open in playground

<.select bordered class="w-full max-w-xs" color="primary">
  <option disabled selected>Choose the best movie</option>
  <option>The Godfather 1</option>
  <option>The Godfather 2</option>
  <option>The Godfather 3</option>
</.select>
<.select bordered class="w-full max-w-xs" color="secondary">
  <option disabled selected>Choose the best movie</option>
  <option>The Godfather 1</option>
  <option>The Godfather 2</option>
  <option>The Godfather 3</option>
</.select>
<.select bordered class="w-full max-w-xs" color="accent">
  <option disabled selected>Choose the best movie</option>
  <option>The Godfather 1</option>
  <option>The Godfather 2</option>
  <option>The Godfather 3</option>
</.select>
<.select bordered class="w-full max-w-xs" color="info">
  <option disabled selected>Choose the best movie</option>
  <option>The Godfather 1</option>
  <option>The Godfather 2</option>
  <option>The Godfather 3</option>
</.select>
<.select bordered class="w-full max-w-xs" color="success">
  <option disabled selected>Choose the best movie</option>
  <option>The Godfather 1</option>
  <option>The Godfather 2</option>
  <option>The Godfather 3</option>
</.select>
<.select bordered class="w-full max-w-xs" color="warning">
  <option disabled selected>Choose the best movie</option>
  <option>The Godfather 1</option>
  <option>The Godfather 2</option>
  <option>The Godfather 3</option>
</.select>
<.select bordered class="w-full max-w-xs" color="error">
  <option disabled selected>Choose the best movie</option>
  <option>The Godfather 1</option>
  <option>The Godfather 2</option>
  <option>The Godfather 3</option>
</.select>

Sizes Open in playground

<.select bordered class="w-full max-w-xs" size="xs">
  <option disabled selected>Choose the best movie</option>
  <option>The Godfather 1</option>
  <option>The Godfather 2</option>
  <option>The Godfather 3</option>
</.select>
<.select bordered class="w-full max-w-xs" size="sm">
  <option disabled selected>Choose the best movie</option>
  <option>The Godfather 1</option>
  <option>The Godfather 2</option>
  <option>The Godfather 3</option>
</.select>
<.select bordered class="w-full max-w-xs" size="md">
  <option disabled selected>Choose the best movie</option>
  <option>The Godfather 1</option>
  <option>The Godfather 2</option>
  <option>The Godfather 3</option>
</.select>
<.select bordered class="w-full max-w-xs" size="lg">
  <option disabled selected>Choose the best movie</option>
  <option>The Godfather 1</option>
  <option>The Godfather 2</option>
  <option>The Godfather 3</option>
</.select>

Select disabled Open in playground

<.select class="w-full max-w-xs" disabled>
  <option>Disabled</option>
</.select>