Select Inputs

Here are some examples showcasing select input components.

Note

Select inputs have a border by default and a width of 20rem. Use select-ghost to remove the border.

Basic Select

Select inputs allow users to choose an option from a dropdown list. They are implemented using the native HTML select element styled with DaisyUI classes.

Preview

Basic Select Country Country Country Country

Code

.flex.flex-col.gap-2
  = daisy_label(for: "basic_select", title: "Basic Select")

  = daisy_select(name: "basic_select", id: "basic_select", placeholder: "Select a country") do |select|
    - select.with_option(value: "us", label: "United States")
    - select.with_option(value: "ca", label: "Canada")
    - select.with_option(value: "mx", label: "Mexico")

  = daisy_label(css: "mt-2", for: "left_label_select", title: "Country")

  = daisy_select(name: "left_label_select", id: "left_label_select", placeholder: "Select a country", start: "Country") do |select|
    - select.with_option(value: "us", label: "United States")
    - select.with_option(value: "ca", label: "Canada")
    - select.with_option(value: "mx", label: "Mexico")

  = daisy_label(css: "mt-2", for: "right_label_select", title: "Country")

  = daisy_tip("DaisyUI end-labeled selects don't currently allow you to select the label area.", css: "tooltip-warning") do
    = daisy_select(name: "right_label_select", id: "right_label_select", placeholder: "Select a country", end: "Country") do |select|
      - select.with_option(value: "us", label: "United States")
      - select.with_option(value: "ca", label: "Canada")
      - select.with_option(value: "mx", label: "Mexico")

  = daisy_select(label_wrapper_css: "mt-8", name: "floating_label_select", id: "floating_label_select", include_blank: true,
                 floating: "Country", placeholder: "Select a country...") do |select|
    - select.with_option(value: "us", label: "United States")
    - select.with_option(value: "ca", label: "Canada")
    - select.with_option(value: "mx", label: "Mexico")

Select with Simple Options

For simpler cases, you can pass a list of strings as options. The value and label will both be set to the string value.

Or you can pass an array of Hashes. You can set the label and value keys through the option_label and option_value parameters.

Preview

Select a t-shirt size Select a table size

Code

.flex.flex-col.gap-8
  - tshirt_sizes = ["Small", "Medium", "Large", "X-Large"]
  = daisy_select(css: "w-60", name: "tshirt_size", id: "tshirt_size",
    floating: "Select a t-shirt size", options: tshirt_sizes)

  :ruby
    table_sizes = [
      { code: "sm", display: "Small (fits 1-2 people)" },
      { code: "md", display: "Medium (fits 2-4 people)" },
      { code: "lg", display: "Large (fits 4-6 people)" },
      { code: "xl", display: "X-Large (fits 6+ people)" }
    ]

  = daisy_select(name: "table_size", id: "table_size", floating: "Select a table size",
    options: table_sizes, option_label: :display, option_value: :code)

Select Sizes

Select inputs can be rendered in different sizes using DaisyUI's size classes.

Preview

Extra Small Select

Small Select

Medium Select (Default)

Large Select

Code

.my-2.space-y-6
  .space-y-2
    = daisy_label(for: "select_xs", title: "Extra Small Select")
    = daisy_select(name: "select_xs", id: "select_xs", css: "select-xs", options: ["Option 1", "Option 2", "Option 3"], placeholder: "Select an option")

  .space-y-2
    = daisy_label(for: "select_sm", title: "Small Select")
    = daisy_select(name: "select_sm", id: "select_sm", css: "select-sm", options: ["Option 1", "Option 2", "Option 3"], placeholder: "Select an option")

  .space-y-2
    = daisy_label(for: "select_md", title: "Medium Select (Default)")
    = daisy_select(name: "select_md", id: "select_md", options: ["Option 1", "Option 2", "Option 3"], placeholder: "Select an option")

  .space-y-2
    = daisy_label(for: "select_lg", title: "Large Select")
    = daisy_select(name: "select_lg", id: "select_lg", css: "select-lg", options: ["Option 1", "Option 2", "Option 3"], placeholder: "Select an option")

Select with Colors

Select inputs can be styled with different colors using DaisyUI's color classes.

Preview

Primary Select

Secondary Select

Accent Select

Warning Select

Code

.my-2.space-y-6
  .space-y-2
    = daisy_label(for: "select_primary", title: "Primary Select")
    = daisy_select(name: "select_primary", id: "select_primary", css: "select-primary", options: ["Option 1", "Option 2", "Option 3"], placeholder: "Select an option")

  .space-y-2
    = daisy_label(for: "select_secondary", title: "Secondary Select")
    = daisy_select(name: "select_secondary", id: "select_secondary", css: "select-secondary", options: ["Option 1", "Option 2", "Option 3"], placeholder: "Select an option")

  .space-y-2
    = daisy_label(for: "select_accent", title: "Accent Select")
    = daisy_select(name: "select_accent", id: "select_accent", css: "select-accent", options: ["Option 1", "Option 2", "Option 3"], placeholder: "Select an option")

  .space-y-2
    = daisy_label(for: "select_warning", title: "Warning Select")
    = daisy_select(name: "select_warning", id: "select_warning", css: "select-warning", options: ["Option 1", "Option 2", "Option 3"], placeholder: "Select an option")

Ghost Select

Select inputs can be styled without a border using the select-ghost class. The border will appear on focus.

Preview

Ghost Select

Code

.my-2.space-y-6
  .space-y-2
    = daisy_label(for: "select_ghost", title: "Ghost Select")
    = daisy_select(name: "select_ghost", id: "select_ghost", css: "select-ghost", options: ["Option 1", "Option 2", "Option 3"], placeholder: "Select an option")

Disabled Select

Select inputs can be disabled using the disabled attribute.

Preview

Disabled Select

Code

.my-2.space-y-2
  = daisy_label(for: "disabled_select", title: "Disabled Select", css: "cursor-not-allowed")
  = daisy_select(name: "disabled_select", id: "disabled_select", options: ["Option 1", "Option 2", "Option 3"], placeholder: "Select an option", disabled: true)

Required Select

Select inputs can be marked as required using the required attribute.

Preview

Required Select *

Code

.my-2.space-y-2
  = daisy_label(for: "required_select", title: "Required Select *")
  = daisy_select(name: "required_select", id: "required_select", options: ["Option 1", "Option 2", "Option 3"], placeholder: "Select an option", required: true)

Pre-Selected Value

Select inputs can have a pre-selected value by setting the value attribute.

Preview

Pre-Selected Select

Code

.my-2.space-y-2
  = daisy_label(for: "preselected_select", title: "Pre-Selected Select")
  = daisy_select(name: "preselected_select", id: "preselected_select", placeholder: "Select a country") do |select|
    - select.with_option(value: "us", label: "United States")
    - select.with_option(value: "ca", label: "Canada", selected: true)
    - select.with_option(value: "mx", label: "Mexico")

Block Syntax for Options

You can use block syntax to define options for more control over each option.

Preview

Block Syntax Select

Code

.my-2.space-y-2
  = daisy_label(for: "block_select", title: "Block Syntax Select")
  = daisy_select(name: "block_select", id: "block_select", css: "select-primary") do |select|
    - select.with_option(value: "red", label: "Red")
    - select.with_option(value: "green", label: "Green")
    - select.with_option(value: "blue", label: "Blue")
    - select.with_option(value: "disabled_option", label: "Disabled Option", disabled: true)

Rails Form Example

The built-in Form Builder extension provides an even easier way to use select inputs in your pages by extracting the name and ID attributes from the form object and attributes.

Preview

Code

= form_with(url: "#", method: :get, scope: :product, html: { class: "space-y-4" }) do |form|
  .space-y-2
    = form.daisy_label(:category) do
      .flex.items-center.gap-2
        = hero_icon("tag", class: "size-4 inline-block")
        Product Category
    = form.daisy_select(:category, placeholder: "Select a category") do |select|
      - select.with_option(value: "electronics", label: "Electronics")
      - select.with_option(value: "clothing", label: "Clothing")
      - select.with_option(value: "home", label: "Home & Kitchen")
      - select.with_option(value: "books", label: "Books")

  .space-y-2
    - options = [ "Under $25", "$25 - $50", "$50 - $100", "$100 - $200", "Over $200" ]
    = form.daisy_label(:price_range) do
      .flex.items-center.gap-2
        = hero_icon("currency-dollar", class: "size-4 inline-block")
        Price Range
    = form.daisy_select(:price_range, options: options, placeholder: "Select a price range")

  = form.submit "Filter Results", class: "mt-2 btn btn-primary w-full"

Select Inputs

Basic Select

Select with Simple Options

Select Sizes

Select with Colors

Ghost Select

Disabled Select

Required Select

Pre-Selected Value

Block Syntax for Options

Rails Form Example

Docs

Guides

Hero

Daisy