• Components
  • Control

Control simple

Hint 
@jrmc.form.control({ name: 'name', class: 'w-full max-w-xs', label: 'Your name', hint: 'Hint' })
  @!jrmc.form.input({placeholder: 'My name', class: 'input-bordered' })
@end
<div class="form-control mb-5 w-full max-w-xs" >
<label class="label cursor-pointer" for="name">
<span class="label-text" >
  Your name</span>  
</label>
  <input
  type="text"
  class="input input-bordered"
   name="name"
   id="name"
  
  placeholder="My name"
  value=""
/>

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

Control inline 

@jrmc.form.control()
  @jrmc.form.label({ class: 'cursor-pointer' })
    @!jrmc.form.label.text({ text: 'Remember me' })
    @!jrmc.form.input({ type: 'checkbox', name: 'my_name', checked })
  @end
@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

@jrmc.form.control({ class: 'w-full max-w-xs' })
  @jrmc.form.label({ text: 'Description' })
    @!jrmc.form.textarea({ placeholder: 'Bio', class: 'textarea-bordered' })
  @end
@end
<div class="form-control mb-5" >

  <label class="label cursor-pointer" >  <span class="label-text" >
  Remember me</span>
<input
  type="checkbox"
  class="checkbox"
   name="my_name"
   id="my_name"
  
  
  value=""
/>

</label>
</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 class="form-control mb-5 w-full max-w-xs" >

  <label class="label" >
<span class="label-text" >
  Description</span>  
<textarea
  class="textarea textarea-bordered"
  
  
  
  placeholder="Bio"></textarea>

</label>
</div>

Control extended

Alt label
Alt label Alt label 
@jrmc.form.control()
  @!jrmc.form.label({ text: 'What is your name?', for: 'my_name' })
  @!jrmc.form.input({ name: 'my_name', placeholder: 'My name', id: 'my_name', class: ['input-bordered', 'w-full', 'max-w-xs'] })
  @!jrmc.form.hint({ as: 'div', text: 'Alt label'})
@end

@jrmc.form.control({ class: ['w-full', 'max-w-xs'] })
  @!jrmc.form.label({ text: 'What is your name?', for: 'my_name' })
  @!jrmc.form.input({ name: 'my_name', placeholder: 'My name', id: 'my_name', class: ['input-bordered', 'w-full', 'max-w-xs'] })
  @jrmc.form.label({ as: 'div' })
    <span class="label-text-alt text-warning">Alt label</span>
    <span class="label-text-alt">Alt label</span>
  @end
@end
<div class="form-control mb-5" >

  <label class="label" for="my_name">
<span class="label-text" >
  What is your name?</span>  
</label>
<input
  type="text"
  class="input input-bordered w-full max-w-xs"
   name="my_name"
   id="my_name"
  
  placeholder="My name"
  value=""
/>

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


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

  <label class="label" for="my_name">
<span class="label-text" >
  What is your name?</span>  
</label>
<input
  type="text"
  class="input input-bordered w-full max-w-xs"
   name="my_name"
   id="my_name"
  
  placeholder="My name"
  value=""
/>

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

Control required

Hint 
@jrmc.form.control({ name: 'name', class: 'w-full max-w-xs', label: 'Your name', hint: 'Hint', required: true })
  @!jrmc.form.input({placeholder: 'My name', class: 'input-bordered' })
@end
<div class="form-control mb-5 w-full max-w-xs" >
<label class="label cursor-pointer" for="name">
<span class="label-text" >
  Your name  *</span>  
</label>
  <input
  type="text"
  class="input input-bordered"
   name="name"
   id="name"
   required
  placeholder="My name"
  value=""
/>

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

Control error 

@jrmc.form.control({ name: 'sampleError', label: 'Your name' })
  @!jrmc.form.input({placeholder: 'My name', class: 'input-bordered' })
@end
<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>

Control error extended

Error 
@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 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"></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"></span>
</div>
</div>

Control default label

Hint 
@jrmc.form.control({ name: 'complexNameForLabel', class: 'w-full max-w-xs', hint: 'Hint' })
  @!jrmc.form.input({placeholder: 'My name', class: 'input-bordered' })
@end
<div class="form-control mb-5 w-full max-w-xs" >
<label class="label cursor-pointer" for="complexNameForLabel">
<span class="label-text" >
  Complex Name For Label:</span>  
</label>
  <input
  type="text"
  class="input input-bordered"
   name="complexNameForLabel"
   id="complexNameForLabel"
  
  placeholder="My name"
  value=""
/>

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