Components

TextInput

A versatile component for capturing user text input.

Logo

Variants

Different styling options for the text input. Use the variant prop to switch between styles.

Radius

Controls the border-radius of the text input, allowing for rounded or sharp corners. Adjust it using the radius prop.

With Icon

Adds an icon inside the input field, enhancing usability and design. Customize it using the icon prop.

ReadOnly

Makes the input field non-editable. Enable this using the readOnly prop.

Disabled

Disables the input field, preventing user interaction. Use the disabled prop to enable this state.

API Reference

variant

Type:

"solid" | "outline" | "ghost" | "soft"

Defines the visual style of the input interface.

Default:

outline
radius

Type:

"none" | "sm" | "md" | "lg" | "xl" | "full"

Controls the border-radius of the input interface, affecting its rounded corners.

Default:

md
mode

Type:

"light" | "dark"

Sets the color mode for the input

Default:

system
inputClass

Type:

string

Allows custom class names to be applied to the input element.

Default:

icon

Type:

ElementType

Renders an icon inside the input field.

Default:

iconSize

Type:

number

Defines the size of the icon inside the input field.

Default: