Hygge-UI

Input

Used to get user input in a text field.

Source

Examples

Variants

Use the variant prop to change the visual style of the input.

Sizes

Use the size prop to change the size of the input.

Helper Text

Pair the input with the Field component to add helper text.

We'll never share your email.
We'll never share your email.

Error Text

Pair the input with the Field component to add error text.

This field is required.
This field is required.

Field

Compose the input with the Field component to add a label, helper text, and error text.

Element

Use the startElement and endElement on theInputGroup component to add an element to the start and end of the input.

Start Icon

Start Text

https://

Start and End Text

$
USD

Select

https://

Addon

Use the startAddon and endAddon on theInputGroup component to add an addon to the start and end of the input.

Start Addon

https://

End Addon

.com

Start and End Addon

$
USD

Disabled

Use the disabled prop to disable the input.