• Components
  • Select

Select bordered 

@!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
  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>

Select size 

@!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' })

@!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' })

@!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'] })
<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>

<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>

<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>

Select disabled 

@!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' },
], disabled: true })
<select
  class="select"
  
  
  
  disabled>
    <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>

Select color 

@!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' })


@!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' })


@!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' })


@!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' })


@!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' })


@!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' })


@!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' })
<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>


<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>


<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>


<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>


<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>


<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>


<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>

Select ghost 

@!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-ghost' })
<select
  class="select select-ghost"
  
  
  
  class="select-ghost">
    <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>

Select control 

@jrmc.form.control({ name: 'movies', class: 'w-full max-w-xs', label: 'Select your movie' })
    @!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' })
  @end

  @jrmc.form.control({ class: 'w-full max-w-xs' })
    @jrmc.form.label({ text: 'Select your movie' })
      @!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' })
    @end
  @end
<div class="form-control mb-5 w-full max-w-xs" >
<label class="label cursor-pointer" for="movies">
<span class="label-text" >
  Select your movie</span>  
</label>
  <select
  class="select select-bordered"
   name="movies"
   id="movies"
  
  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>

</div>


<div class="form-control mb-5 w-full max-w-xs" >

  <label class="label" >
<span class="label-text" >
  Select your movie</span>  <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>

</label>
</div>

Select hint

Short description 
@jrmc.form.control({ name: 'movies', class: 'w-full max-w-xs', label: 'Select your movie', hint: 'Short description' })
  @!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' })
@end
<div class="form-control mb-5 w-full max-w-xs" >
<label class="label cursor-pointer" for="movies">
<span class="label-text" >
  Select your movie</span>  
</label>
  <select
  class="select select-bordered"
   name="movies"
   id="movies"
  
  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>

<div class="label" >    <span class="label-text-alt text-warning">Short description</span>
</div></div>

Select multiple 

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

Select value 

@!jrmc.form.select({ options: [
  { text: 'Pick one', value: 'pick_one' },
  { 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', value: 'star_wars' })

@!jrmc.form.select({ options: [
  { text: 'Pick one', value: 'pick_one' },
  { 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', multiple, value: ['harry_potter', 'lord_of_the_rings'] })
<select
  class="select select-bordered"
  
  
  
  class="select-bordered">
    <option
      value="pick_one"
      
      
    >
      Pick one
    </option>
    <option
      value="star_wars"
      
       selected
    >
      Star Wars
    </option>
    <option
      value="harry_potter"
      
      
    >
      Harry Potter
    </option>
    <option
      value="lord_of_the_rings"
      
      
    >
      Lord of the Rings
    </option>
</select>

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