• Components
  • Input

Input 













@!jrmc.form.input({ placeholder: 'Default', class: 'w-full' })
<br /><br />
@!jrmc.form.input({ type: 'number', placeholder: '0', class: 'w-full' })
<br /><br />
@!jrmc.form.input({ type: 'email', placeholder: 'john.snow@got.com', class: 'w-full' })
<br /><br />
@!jrmc.form.input({ type: 'date', class: 'w-full' })
<br /><br />
@!jrmc.form.input({ type: 'datetime-local', class: 'w-full' })
<br /><br />
@!jrmc.form.input({ type: 'color', class: 'w-full' })
<br /><br />
@!jrmc.form.input({ type: 'hidden', value: 'true', class: 'w-full' })
<input
  type="text"
  class="input w-full"
  
  
  
  placeholder="Default"
  value=""
/>

<br /><br /><input
  type="number"
  class="input w-full"
  
  
  
  placeholder="0"
  value=""
/>

<br /><br /><input
  type="email"
  class="input w-full"
  
  
  
  placeholder="john.snow@got.com"
  value=""
/>

<br /><br /><input
  type="date"
  class="input w-full"
  
  
  
  
  value=""
/>

<br /><br /><input
  type="datetime-local"
  class="input w-full"
  
  
  
  
  value=""
/>

<br /><br /><input
  type="color"
  class="input w-full"
  
  
  
  
  value=""
/>

<br /><br /><input
  type="hidden"
  class="input w-full"
  
  
  
  
  value="true"
/>

Input bordered 

@!jrmc.form.input({ placeholder: 'Bordered', class: 'input-bordered' })
<input
  type="text"
  class="input input-bordered"
  
  
  
  placeholder="Bordered"
  value=""
/>

Input color 













@!jrmc.form.input({ placeholder: 'Color',  class: 'input-primary' })
  <br /><br />
  @!jrmc.form.input({ placeholder: 'Color',  class: 'input-secondary' })
  <br /><br />
  @!jrmc.form.input({ placeholder: 'Color',  class: 'input-accent' })
  <br /><br />
  @!jrmc.form.input({ placeholder: 'Color',  class: 'input-info' })
  <br /><br />
  @!jrmc.form.input({ placeholder: 'Color',  class: 'input-success' })
  <br /><br />
  @!jrmc.form.input({ placeholder: 'Color',  class: 'input-warning' })
  <br /><br />
  @!jrmc.form.input({ placeholder: 'Color',  class: 'input-error' })
<input
  type="text"
  class="input input-primary"
  
  
  
  placeholder="Color"
  value=""
/>

  <br /><br /><input
  type="text"
  class="input input-secondary"
  
  
  
  placeholder="Color"
  value=""
/>

  <br /><br /><input
  type="text"
  class="input input-accent"
  
  
  
  placeholder="Color"
  value=""
/>

  <br /><br /><input
  type="text"
  class="input input-info"
  
  
  
  placeholder="Color"
  value=""
/>

  <br /><br /><input
  type="text"
  class="input input-success"
  
  
  
  placeholder="Color"
  value=""
/>

  <br /><br /><input
  type="text"
  class="input input-warning"
  
  
  
  placeholder="Color"
  value=""
/>

  <br /><br /><input
  type="text"
  class="input input-error"
  
  
  
  placeholder="Color"
  value=""
/>

Input size 







@!jrmc.form.input({ placeholder: 'Size xs',  class: 'input-xs' })
<br /><br />
@!jrmc.form.input({ placeholder: 'Size sm',  class: 'input-sm' })
<br /><br />
@!jrmc.form.input({ placeholder: 'Size md',  class: 'input-md' })
<br /><br />
@!jrmc.form.input({ placeholder: 'Size lg',  class: 'input-lg' })
<input
  type="text"
  class="input input-xs"
  
  
  
  placeholder="Size xs"
  value=""
/>

<br /><br /><input
  type="text"
  class="input input-sm"
  
  
  
  placeholder="Size sm"
  value=""
/>

<br /><br /><input
  type="text"
  class="input input-md"
  
  
  
  placeholder="Size md"
  value=""
/>

<br /><br /><input
  type="text"
  class="input input-lg"
  
  
  
  placeholder="Size lg"
  value=""
/>

Input disabled 

@!jrmc.form.input({ placeholder: 'Disabled',  disabled: true })
<input
  type="text"
  class="input"
  
  
  
  placeholder="Disabled" disabled
  value=""
/>

Input ghost 

@!jrmc.form.input({ placeholder: 'Ghost',  class: 'input-ghost' })
<input
  type="text"
  class="input input-ghost"
  
  
  
  placeholder="Ghost"
  value=""
/>

Input control 

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

Input hint

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>