alp-ui

Input

A text input field with focus ring and disabled state.

Usage

<!-- Basic input -->
<input x-data="input()" x-bind="inputAttrs" type="email" placeholder="Email" />

<!-- Input with label and description (using Field) -->
<div x-data="field()" x-bind="fieldAttrs">
  <label x-data="label()" x-bind="labelAttrs">Email</label>
  <div x-data="fieldContent()" x-bind="fieldContentAttrs">
    <input x-data="input()" x-bind="inputAttrs" type="email" placeholder="[email protected]" />
    <p x-data="fieldDescription()" x-bind="fieldDescriptionAttrs">We'll never share your email.</p>
  </div>
</div>

<!-- Invalid input -->
<div x-data="field({ invalid: true })" x-bind="fieldAttrs">
  <label x-data="label()" x-bind="labelAttrs">Email</label>
  <div x-data="fieldContent()" x-bind="fieldContentAttrs">
    <input x-data="input()" x-bind="inputAttrs" type="email" value="invalid" aria-invalid="true" />
    <p x-data="fieldDescription()" x-bind="fieldDescriptionAttrs" class="text-destructive">Please enter a valid email.</p>
  </div>
</div>

<!-- Input Group (prefix/suffix) -->
<div x-data="inputGroup()" x-bind="inputGroupAttrs">
  <div x-data="inputGroupAddon({ align: 'inline-start' })" x-bind="inputGroupAddonAttrs">
    <svg>...</svg>
  </div>
  <input x-data="inputGroupInput()" x-bind="inputGroupInputAttrs" type="url" placeholder="Website" />
  <div x-data="inputGroupAddon({ align: 'inline-end' })" x-bind="inputGroupAddonAttrs">
    <span>https://</span>
  </div>
</div>

<!-- Field Group (grid layout) -->
<div x-data="fieldGroup()" x-bind="fieldGroupAttrs">
  <div x-data="field()" x-bind="fieldAttrs">
    <label x-data="label()" x-bind="labelAttrs">First Name</label>
    <input x-data="input()" x-bind="inputAttrs" type="text" />
  </div>
  <div x-data="field()" x-bind="fieldAttrs">
    <label x-data="label()" x-bind="labelAttrs">Last Name</label>
    <input x-data="input()" x-bind="inputAttrs" type="text" />
  </div>
</div>

Examples

Field

Use field(), fieldContent(), and fieldDescription() to build inputs with labels and helper text.

Choose a unique username for your account.

We'll send updates to this address.

Invalid

Use invalid: true on the field and aria-invalid="true" on the input to show validation errors.

This field contains validation errors.

File

Use type="file" to create a file input.

Select a picture to upload.

Inline

Use orientation="horizontal" on a field to create an inline input paired with a button.

Grid

Use fieldGroup to place multiple fields side by side.

Required

Use the required attribute and add a visual indicator to the label.

This field must be filled out.

Badge

Add a badge inside the label to highlight a recommended field.

Input Group

Use inputGroup and inputGroupAddon to add icons, text, or buttons inside an input.

https://

Button Group

Use buttonGroup to attach buttons to an input.

Form

A complete form combining multiple input types.

We'll never share your email with anyone.