edge-components

Select Size 

<div class="w-full max-w-xs"><select class="select select-bordered select-lg" class="select-bordered select-lg">
        <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-bordered" class="select-bordered">
        <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-bordered select-sm" class="select-bordered select-sm">
        <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-bordered select-lg' })

  <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-bordered' })

  <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-bordered', 'select-sm'] })
</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)