edge-components

Select Control 

<div class="w-full max-w-xs">
    <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>

</div>
 
<div class="w-full max-w-xs">
  @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>
  • Handle: @select-control
  • Preview:
  • Filesystem Path: fractal/components/03-form/07-select/06-select-control.edge

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)