Input

A versatile text input component with support for labels, validation states, icons, and various visual styles.

Import#

import { Input } from "asheeui";

Usage#

import { Input } from "asheeui";

export default function Basic() {
  return (
    <div className="w-full max-w-md">
      <Input placeholder="Enter your name" />
    </div>
  );
}

Examples#

Variant#

Color.#

Size#

Radius#

Status states#

With label#

Label alignment#

With description#

With icons#

Required#

Disabled#

Loading state#

Props#

* Falls back through Global Configuration if not set. See below.

Global Configuration#

Input reads defaults from four places, in this order of precedence:

1. Instance prop: set directly on <Input />
2. Component config: components.input in your ashee.config
3. Theme default: defaultVariant / defaultColor / defaultRadius in your ashee.config
4. Built-in fallback: component's internal default values

Component config#

// ashee.config.ts
import type { ExternalConfig } from "asheeui";

export const config: ExternalConfig = {
  components: {
    input: {
      size: "md",
      radius: "md",
      variant: "bordered",
      color: "primary",
      labelAlign: "left",
    },
  },
};

Built-in fallbacks#

{
  size: "md",
  radius: "md",
  variant: "bordered",
  color: "primary",
  status: "default",
  labelAlign: "left",
}

Accessibility#

• Renders a native <input> element with proper semantics
• Uses aria-invalid for error states
• Uses aria-describedby to associate description and message text
• Uses aria-busy for loading state
• Supports disabled and required attributes natively
• Implements focus-visible rings for keyboard navigation
• Labels are properly associated with htmlFor/id

Notes#

• Status Colors: When status is set to error, success, or warning, the input border automatically reflects the status color.
• Underlined Variant: When variant="underlined", the input has no border radius and only a bottom border.
• Icons: Use startContent and endContent to add icons or other elements inside the input.
• Loading State: When isLoading is true, the input shows a loading indicator and disables interaction.
• Virtual Keyboard: The Input component automatically integrates with the Keyboard system. See the Keyboard documentation for more details.
• Inheritance: Many other components (Select, Autocomplete, MultiSelect, DatePicker) extend the Input component and inherit all of its properties including label, description, status, and content slots.