edge-components

Input 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="lastname">
            <span class="label-text">
                Lastname</span>
        </label>
        <input type="text" class="input input-bordered" name="lastname" id="lastname" placeholder="Jean" value="" />

    </div>

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

        <label class="label">
            <span class="label-text">
                Firstname</span> <input type="text" class="input input-bordered" placeholder="Luc" value="" />

        </label>
    </div>

</div>
 
<div class="w-full max-w-xs">
  @jrmc.form.control({ name: 'lastname', class: 'w-full max-w-xs', label: 'Lastname' })
    @!jrmc.form.input({ placeholder: 'Jean', class: 'input-bordered' })
  @end


  @jrmc.form.control({ class: 'w-full max-w-xs' })
    @jrmc.form.label({ text: 'Firstname' })
      @!jrmc.form.input({ placeholder: 'Luc', class: 'input-bordered' })
    @end
  @end
</div>
  • Handle: @input-control
  • Preview:
  • Filesystem Path: fractal/components/03-form/01-input/07-input-control.edge

Text Input

Doc : daisyui text input

Text Input is a simple input field.

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