Installation#
npmpnpmyarnbun
Examples#
Default#
Default
Sizes#
Available in four sizes to fit different UI contexts.
Sizes
Variants#
The Input component supports several visual variants.
Variants
Validation States#
Use the state prop to indicate validation status.
States
With Icons#
Inputs can include icons before or after the text field.
With Icons
Shadow#
Add elevation with the shadow prop.
Shadow
Block Width#
By default, inputs span the full width. Use block={false} to make them inline.
Block Width
Disabled State#
Disabled
Input Types#
The Input component supports all native input types.
Input Types
Controlled Input#
Controlled
Usage#
Import
import { Input } from "@sugarcoat/ui-nxt";Usage
<Input
placeholder="Enter text"
size="md"
variant="default"
state="valid"
/>Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "xs" | "sm" | "md" | "lg" | "md" | Size of the input |
| variant | "default" | "outline" | "ghost" | "glass" | "default" | Visual style variant |
| state | "valid" | "invalid" | - | Validation state of the input |
| shadow | "none" | "sm" | "md" | "lg" | "inset" | "sm" | Box shadow elevation |
| block | boolean | true | Whether the input spans full width |
| animation | boolean | true | Enable transition animations |
| leftIcon | ReactNode | - | Icon to display before the input |
| rightIcon | ReactNode | - | Icon to display after the input |
| wrapperClassName | string | - | Additional class name for the wrapper element |
| disabled | boolean | false | Whether the input is disabled |
| css | SystemStyleObject | - | Additional CSS styles using Panda CSS syntax |
Accessibility#
- Uses native
<input>element for full accessibility support - Supports keyboard navigation and focus management
- Disabled state properly communicated to assistive technologies
- Use with
<Label>component for accessible form labels - Validation states should be accompanied by error messages for screen readers