Input

Single-line text field on the shared control surface.

When to use

Use Input when you need single-line text field on the shared control surface.

Import

TypeScript

import { Input } from '@gzodo/ui'

Input is a native input with forwardRef. Use it for short values: names, emails, search. For several lines, use Textarea. For a labeled field with validation, put it inside Form.Field.

Examples

Basic

Placeholder, value, and every native input attribute are forwarded. Default variant is the filled control surface.

Variants

default is filled. outline is transparent with a border. ghost has no border until hover.

Sizes

Heights match the control scale: 22, 28, 32, 37.

Full width and fit width

fullWidth takes the row. fitWidth sizes the field to its content, which is useful in toolbars.

Disabled and alignment

disabled blocks editing. align sets the text alignment inside the field.

Input

Property

Description

Type

Default

size

Fixed height of the control.

'sm' | 'md' | 'lg' | 'xl'

'md'

variant

Surface treatment. Primary is the main action.

—

fullWidth

Stretch the control to the container width.

boolean

false

disabled

Blocks interaction and lowers opacity.

boolean

false

className

Extra classes, merged with the component classes.

string

—

fitWidth

Shrink the field to its text.

boolean

false

align

Text alignment inside the field.

'left' | 'center' | 'right'

—

placeholder

Native placeholder.

string

—

type

Native input type: text, email, password, number, …

string

'text'

IconButton

Textarea