edge-components

Control Error Extended 

<div>
    <div class="form-control mb-5">
        <label class="label cursor-pointer" for="sampleError">
            <span class="label-text">
                Your name</span>
        </label>
        <input type="text" class="input input-bordered" name="sampleError" id="sampleError" placeholder="My name" value="" />

        <div class="label"> <span class="label-text-alt text-error">This field is required</span>
        </div>
    </div>

    <div class="form-control mb-5">
        <label class="label cursor-pointer" for="sampleError">
            <span class="label-text">
                Your name</span>
        </label>
        <input type="text" class="input input-bordered" name="sampleError" id="sampleError" placeholder="My name" value="" />

        <div class="label"> <span class="label-text-alt text-error">Error</span>
        </div>
    </div>

    <div class="form-control mb-5">
        <label class="label cursor-pointer" for="sampleError">
            <span class="label-text">
                Your name</span>
        </label>
        <input type="text" class="input input-bordered" name="sampleError" id="sampleError" placeholder="My name" value="" />

        <div class="label"> <span class="label-text-alt"></span>
            <span class="label-text-alt text-error">This field is required</span>
        </div>
    </div>

</div>
 
<div>
  @jrmc.form.control({ name: 'sampleError', label: 'Your name', error: false })
    @!jrmc.form.input({placeholder: 'My name', class: 'input-bordered' })
    @!jrmc.form.error()
  @end

  @jrmc.form.control({ name: 'sampleError', label: 'Your name', error: false })
    @!jrmc.form.input({placeholder: 'My name', class: 'input-bordered' })
    @!jrmc.form.error({ text: 'Error' })
  @end


  @jrmc.form.control({ name: 'sampleError', label: 'Your name', error: false })
    @!jrmc.form.input({placeholder: 'My name', class: 'input-bordered' })
    @jrmc.form.label({ as: 'div' })
      <span class="label-text-alt"></span>
      <span class="label-text-alt text-error">{{ $context.error || '' }}</span>
    @end
  @end
</div>
  • Handle: @control-error-extended
  • Preview:
  • Filesystem Path: fractal/components/03-form/09-control/06-control-error-extended.edge

Form Control

Doc : daisyui control

Control is a container field.

Class name Type
form-control Component Container element