Input fields

Give textual form controls like `<input>`s and `<textarea>`s an upgrade with custom styles, sizing, focus states, and more.

Basic <input>

<div class="form">
  <div class="field">
    <label for="input1" class="label">Email address:</label>
    <input type="email" class="input"
           id="input1" placeholder="name@example.com"/>
  </div>
</div>

@use '~/styles/app.scss' as app;

$form: app.get-theme(app.$theme, 'components.form');

@include app.generate-component(
  $form,
  'form',
  app.$config,
  app.$theme
);

Basic <textarea>

<div class="form">
  <div class="field">
    <label for="input2" class="label">Email address:</label>
    <textarea class="textarea" id="input2" rows="3"></textarea>
  </div>
</div>

@use '~/styles/app.scss' as app;

$form: app.get-theme(app.$theme, 'components.form');

@include app.generate-component(
  $form,
  'form',
  app.$config,
  app.$theme
);

Advanced <input>

<div class="form">
  <div class="field">
    <label for="input1" class="label">Name:</label>
    <input type="name" id="1" value="John Doe" class="input"/>
  </div>
  <div class="field">
    <label for="input2" class="label">Email:</label>
    <input type="email" id="input2" value="john.doe@cirrus.io" class="input"/>
  </div>
  <div class="field">
    <label for="input3" class="label">URL:</label>
    <input type="url" id="input3" value="https://spiderpig86.github.io/Cirrus" class="input"/>
  </div>
  <div class="field">
    <label for="input4" class="label">Search:</label>
    <input type="search" id="input4" placeholder="Search" class="input"/>
  </div>
  <div class="field">
    <label for="input5" class="label">Phone:</label>
    <input type="tel" id="input5" value="1-(800)-777-7777" class="input"/>
  </div>
  <div class="field">
    <label for="input6" class="label">Password:</label>
    <input type="password" id="input6" value="password" class="input"/>
  </div>
  <div class="field">
    <label for="input7" class="label">Number:</label>
    <input type="number" id="input7" value="420" class="input"/>
  </div>
  <div class="field">
    <label for="input8" class="label">Date:</label>
    <input type="date" id="input8" value="2017-3-21" class="input"/>
  </div>
  <div class="field">
    <label for="input9" class="label">Time:</label>
    <input type="time" id="input9" class="input"/>
  </div>
  <div class="field">
    <label for="input10" class="label">Color:</label>
    <input type="color" id="input10" value="#f03d4d" class="input"/>
  </div>
  <div class="field">
    <label for="input11" class="label">File:</label>
    <input type="file" id="input11" class="input"/>
  </div>
  <div class="field">
    <label for="input12" class="label">Range:</label>
    <input type="range" id="input12" name="volume" min="0" max="11"/>
  </div>
</div>

@use '~/styles/app.scss' as app;

$form: app.get-theme(app.$theme, 'components.form');

@include app.generate-component(
  $form,
  'form',
  app.$config,
  app.$theme
);

Disabled

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="plaintext"><code><span class="line"><span>&lt;Raw file={file} line_start={159} line_end={165}&gt;</span></span>
<span class="line"><span>  &lt;div class=&quot;form&quot;&gt;</span></span>
<span class="line"><span>    &lt;div class=&quot;field&quot;&gt;</span></span>
<span class="line"><span>      &lt;label for=&quot;input1&quot; class=&quot;label&quot;&gt;Email address:&lt;/label&gt;</span></span>
<span class="line"><span>      &lt;input type=&quot;email&quot; class=&quot;input&quot;</span></span>
<span class="line"><span>             id=&quot;input1&quot; placeholder=&quot;name@example.com&quot; disabled/&gt;</span></span>
<span class="line"><span>    &lt;/div&gt;</span></span>
<span class="line"><span>  &lt;/div&gt;</span></span>
<span class="line"><span>&lt;/Raw&gt;</span></span></code></pre>

@use '~/styles/app.scss' as app;

$form: app.get-theme(app.$theme, 'components.form');

@include app.generate-component(
  $form,
  'form',
  app.$config,
  app.$theme
);

Readonly

<div class="form">
  <div class="field">
    <label for="input1" class="label">Email address:</label>
    <input type="email" class="input"
           id="input1" placeholder="name@example.com" readonly />
  </div>
</div>

@use '~/styles/app.scss' as app;

$form: app.get-theme(app.$theme, 'components.form');

@include app.generate-component(
  $form,
  'form',
  app.$config,
  app.$theme
);

<input type="name" value="John Doe" class="input"/>

<input type="email" value="john.doe@cirrus.io" class="input"/>

<input type="url" value="https://github.com/nulllogic/scssleon" class="input"/>

<input type="search" placeholder="Search" class="input"/>

<input type="tel" value="1-(800)-777-7777" class="input"/>

<input type="password" value="password" class="input"/>

<input type="number" value="420" class="input"/>

<input type="date" value="2017-3-21" class="input"/>

<input type="time" class="input"/>

<input type="color" value="#f03d4d" class="input"/>

<input type="file" class="input"/>


<select class="select" placeholder="Choose one">
  <option>Shibe</option>
  <option>Doggo</option>
  <option>Pupper</option>
</select>

<select class="select" multiple>
  <option>Shibe</option>
  <option>Doggo</option>
  <option>Pupper</option>
</select>

<input type="range" id="volume" name="volume" min="0" max="11"/>
<label htmlFor="volume">Volume</label>