Page

Default

Renders a standalone input with default styling.

basic
with icon

Variant

The input component supports plain (default), violet, green, and ghost variants. Ghost variants provide a borderless appearance with higher contrast backgrounds.

plain
plain with icon
plain disabled
violet
violet with icon
violet disabled
green
green with icon
green disabled
ghost plain
ghost plain with icon
ghost plain disabled
ghost violet
ghost violet with icon
ghost violet disabled
ghost green
ghost green with icon
ghost green disabled

Size

Use size to control input height. The sm size is 32px, md is 36px.

md
md with icon
sm
sm with icon

Focus Ring

Control the focus ring visibility. Set focusRing={false} to disable the focus ring for seamless inline editing experiences.

with focus ring
with focus ring and icon
without focus ring
without focus ring and icon

Label

Associates the input with a label using Fieldset.Group.Field.

Description

Adds helper description text above or below the input.

above

Use the name you'd like people to see in their cart.

below

Use the name you'd like people to see in their cart.

Icon

Embeds a leading icon inside the input.

Type

Sets the input type to password for obscured text.

Disabled

Demonstrates a disabled input field and label.

This field is disabled

Invalid

Displays the invalid state with an error message.

This field is required