Input

An input field is a text field that users can type into. It has a range of options and supports several text formats including numbers.

Use to allow users to provide text input when the expected input is short. For longer input, use the textarea component.

<ahi-input label="Name"></ahi-input>

        
  
        
      

Examples

Input types

Number

Use when input text should be a number.

<ahi-input label="Quantity" type="number"></ahi-input>

        
  
        
      

Email

Use when the text input should be an email address.

<ahi-input label="Email" type="email" autocomplete="email" value="test@example.com"></ahi-input>

        
  
        
      

Date picker

Only use this kind of date input when users need to find a date in relation to another, or if they need to know the day, week, or month that the date relates to.

<ahi-input label="Appointment date" type="date"></ahi-input>

        
  
        
      

Placeholder

Use to provide a short, non-essential hint about the expected input. Placeholder text is low-contrast, so don’t rely on it for important information.

<ahi-input label="First name" placeholder="e.g. John"></ahi-input>

        
  
        
      

Help text

Use to show short instructional content below the text field. Help text helps users understand how to fix errors that result from incorrect formatting (such as dates or passwords with specific character requirements).

<ahi-input
  label="Account email"
  type="email"
  autocomplete="email"
  value="test@example.com"
  help-text="We'll use this address if we need to contact you about your account."
></ahi-input>

        
  
        
      

Clearable

Add the clearable attribute to add a clear button when the input has content.

<ahi-input label="Clearable field" value="clearable" clearable></ahi-input>

        
  
        
      

Password toggle

Add the password-toggle attribute to add a toggle button that will show the password when activated.

<ahi-input label="Password" type="password" value="secret" password-toggle></ahi-input>

        
  
        
      

Filled

Add the filled attribute to draw a filled input.

<ahi-input placeholder="Search" filled></ahi-input>

        
  
        
      

Prefix or suffix

Use as a special form of help text that works best inline. Use a prefix for things like currency symbols (“$”, “¥”, “£”). Use suffix for things like units of measure (“in”, “cm”, “lbs“, “oz”).

<ahi-input label="Price" type="number">
  <span slot="prefix">$</span>
</ahi-input>

<br />

<ahi-input label="Weight" type="number">
  <span slot="suffix">lbs</span>
</ahi-input>

<br />

<ahi-input placeholder="Search" filled>
  <ahi-icon slot="prefix" name="search" size="minor"></ahi-icon>
</ahi-input>


        
  
        
      

Disabled

Use to show that an input is not available for interaction. Most often used in forms when information is required only in a particular state.

<ahi-input label="Name" disabled></ahi-input>

        
  
        
      

Character Count

Use to show the character count of an input. If the input also has a maxlength attribute, the number of characters left will be displayed.

<ahi-input label="Name" character-count maxlength="25"></ahi-input>
<ahi-input label="Bio" character-count></ahi-input>

        
  
        
      

Customizing label position

Use CSS parts to customize the way form controls are drawn. This example uses CSS grid to position the label to the left of the control, but the possible orientations are nearly endless. The same technique works for inputs, textareas, radio groups, and similar form controls.

<ahi-input class="input-label-on-left" label="Name"></ahi-input><br />
<ahi-input class="input-label-on-left" label="Email" type="email"></ahi-input>

<style>
  .input-label-on-left {
    --label-width: 3.75rem;
    --gap-width: 1rem;
  }

  .input-label-on-left + .input-label-on-left {
    margin-top: var(--ahi-space-4);
  }

  .input-label-on-left::part(form-control) {
    display: grid;
    grid: auto / var(--label-width) 1fr;
    gap: var(--ahi-space-05) var(--gap-width);
    align-items: center;
  }

  .input-label-on-left::part(form-control-label) {
    text-align: right;
  }

  .input-label-on-left::part(form-control-help-text) {
    grid-column-start: 2;
  }
</style>

        
  
        
      

Importing

<script type="module" src="/path/to/azalea-kit-ui/dist/components/input/input.js"></script>
        
  
        
      

import '@azaleahealth/azalea-kit-ui/dist/components/input/input.js';
        
  
        
      

Slots

Learn more about using slots.

Properties

Learn more about properties and attributes.

Events

Learn more about events.

Methods

Learn more about methods.

CSS Parts

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

• <ahi-icon>