edge-components

Select Color 

<div class="w-full max-w-xs"><select class="select select-primary" class="select-primary">
        <option value="pick_one" disabled selected>
            Pick one
        </option>
        <option value="star_wars">
            Star Wars
        </option>
        <option value="harry_potter">
            Harry Potter
        </option>
        <option value="lord_of_the_rings">
            Lord of the Rings
        </option>
    </select>

    <br /><br />
    <select class="select select-secondary" class="select-secondary">
        <option value="pick_one" disabled selected>
            Pick one
        </option>
        <option value="star_wars">
            Star Wars
        </option>
        <option value="harry_potter">
            Harry Potter
        </option>
        <option value="lord_of_the_rings">
            Lord of the Rings
        </option>
    </select>

    <br /><br />
    <select class="select select-accent" class="select-accent">
        <option value="pick_one" disabled selected>
            Pick one
        </option>
        <option value="star_wars">
            Star Wars
        </option>
        <option value="harry_potter">
            Harry Potter
        </option>
        <option value="lord_of_the_rings">
            Lord of the Rings
        </option>
    </select>

    <br /><br />
    <select class="select select-info" class="select-info">
        <option value="pick_one" disabled selected>
            Pick one
        </option>
        <option value="star_wars">
            Star Wars
        </option>
        <option value="harry_potter">
            Harry Potter
        </option>
        <option value="lord_of_the_rings">
            Lord of the Rings
        </option>
    </select>

    <br /><br />
    <select class="select select-success" class="select-success">
        <option value="pick_one" disabled selected>
            Pick one
        </option>
        <option value="star_wars">
            Star Wars
        </option>
        <option value="harry_potter">
            Harry Potter
        </option>
        <option value="lord_of_the_rings">
            Lord of the Rings
        </option>
    </select>

    <br /><br />
    <select class="select select-warning" class="select-warning">
        <option value="pick_one" disabled selected>
            Pick one
        </option>
        <option value="star_wars">
            Star Wars
        </option>
        <option value="harry_potter">
            Harry Potter
        </option>
        <option value="lord_of_the_rings">
            Lord of the Rings
        </option>
    </select>

    <br /><br />
    <select class="select select-error" class="select-error">
        <option value="pick_one" disabled selected>
            Pick one
        </option>
        <option value="star_wars">
            Star Wars
        </option>
        <option value="harry_potter">
            Harry Potter
        </option>
        <option value="lord_of_the_rings">
            Lord of the Rings
        </option>
    </select>

</div>
 
<div class="w-full max-w-xs">
  @!jrmc.form.select({ options: [
    { text: 'Pick one', value: 'pick_one', disabled: true, selected: true },
    { text: 'Star Wars', value: 'star_wars' },
    { text: 'Harry Potter', value: 'harry_potter' },
    { text: 'Lord of the Rings', value: 'lord_of_the_rings' },
  ], class: 'select-primary' })

  <br /><br />

  @!jrmc.form.select({ options: [
    { text: 'Pick one', value: 'pick_one', disabled: true, selected: true },
    { text: 'Star Wars', value: 'star_wars' },
    { text: 'Harry Potter', value: 'harry_potter' },
    { text: 'Lord of the Rings', value: 'lord_of_the_rings' },
  ], class: 'select-secondary' })

  <br /><br />

  @!jrmc.form.select({ options: [
    { text: 'Pick one', value: 'pick_one', disabled: true, selected: true },
    { text: 'Star Wars', value: 'star_wars' },
    { text: 'Harry Potter', value: 'harry_potter' },
    { text: 'Lord of the Rings', value: 'lord_of_the_rings' },
  ], class: 'select-accent' })

  <br /><br />

  @!jrmc.form.select({ options: [
    { text: 'Pick one', value: 'pick_one', disabled: true, selected: true },
    { text: 'Star Wars', value: 'star_wars' },
    { text: 'Harry Potter', value: 'harry_potter' },
    { text: 'Lord of the Rings', value: 'lord_of_the_rings' },
  ], class: 'select-info' })

  <br /><br />

  @!jrmc.form.select({ options: [
    { text: 'Pick one', value: 'pick_one', disabled: true, selected: true },
    { text: 'Star Wars', value: 'star_wars' },
    { text: 'Harry Potter', value: 'harry_potter' },
    { text: 'Lord of the Rings', value: 'lord_of_the_rings' },
  ], class: 'select-success' })

  <br /><br />

  @!jrmc.form.select({ options: [
    { text: 'Pick one', value: 'pick_one', disabled: true, selected: true },
    { text: 'Star Wars', value: 'star_wars' },
    { text: 'Harry Potter', value: 'harry_potter' },
    { text: 'Lord of the Rings', value: 'lord_of_the_rings' },
  ], class: 'select-warning' })

  <br /><br />

  @!jrmc.form.select({ options: [
    { text: 'Pick one', value: 'pick_one', disabled: true, selected: true },
    { text: 'Star Wars', value: 'star_wars' },
    { text: 'Harry Potter', value: 'harry_potter' },
    { text: 'Lord of the Rings', value: 'lord_of_the_rings' },
  ], class: 'select-error' })

</div>

Select

Doc : daisyui select

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

Class name Type
select Component For <select> element
select-bordered Modifier Adds border to select
select-ghost Modifier Adds ghost style to select
select-primary Modifier Adds primary color to select
select-secondary Modifier Adds secondary color to select
select-accent Modifier Adds accent color to select
select-info Modifier Adds info color to select
select-success Modifier Adds success color to select
select-warning Modifier Adds warning color to select
select-error Modifier Adds error color to select
select-lg Responsive Large size for select
select-md Responsive Medium (default) size for select
select-sm Responsive Small size for select
select-xs Responsive Extra small size for select

Specific params

Param name Type
options object object of options elements
– text string text of option element
– value string value of option element
– disabled boolean
– selected boolean
value string/array default value(s)