Input

Overview

The Input component provides a styled text input field with support for different sizes, width behaviors, and validation states. It includes automatic styling for focus, disabled, and error states, with proper accessibility attributes.

Import

import { Input } from "@px-ui/core";

Usage

<Input placeholder="Enter your email" />

Examples

Sizes

The Input component supports two size variants for different interface densities.

<Input size="sm" placeholder="Small input" />
<Input size="default" placeholder="Default input" />

Width Variants

Control how the input handles width with two variants: enforced for a fixed minimum width, and full for 100% width.

<Input widthVariant="enforced" placeholder="Enforced width" />
<Input widthVariant="full" placeholder="Full width" />

Invalid State

The Input component supports validation states through the invalid prop, which applies error styling and sets the appropriate ARIA attributes.

<Input placeholder="Valid input" />
<Input invalid placeholder="Invalid input" />
<Input disabled placeholder="Disabled input" />

API Reference

Input

A styled text input component with size, width, and validation customization.

Inherited Props: Inherits all props from native HTML input element including type, value, onChange, placeholder, disabled, etc. Note that the native size attribute is omitted in favor of the custom size prop.