Waffle Design System

Input

Input component enables the user to interact with and input content and data. The form input allows you to create various text style inputs such as text, password, email, number, url, search and more.

Import

Usage

Here's a basic usage of the Input component.

Editable Example
Editable Example

Controlled Input

Editable Example

Props

The Input component composes PseudoBox so you can pass all PseudoBox props, and React.InputHTMLAttributes.

NameTypeDefaultDescription
asReact.ElementTypeThe component to use in place of input.
aria-labelstringAccessibility label to use, in scenarios where the input has no visible label. A11y: It's usefult for screen readers.
aria-describedbystringAccessibility label to use, in scenarios where the input has no visible label. A11y: It's usefult for screen readers.
isDisabledbooleanfalseIf true, the input will be disabled. This sets aria-disabled=true and you can style this state by passing _disabled prop.
isInvalidbooleanfalseIf true, the input will indicate an error. This sets aria-invalid=true and you can style this state by passing _invalid prop.
isRequiredbooleanfalseIf true, the input element will be required.
isFullWidthbooleanfalseIf true, the input element will span the full width of it's parent.
isReadOnlybooleanfalseIf true, prevents the value of the input from being edited.
sizesm, md, lgmdThe visual size of the input element.
variantoutline, unstyled, flushed, filledoutlineThe variant of the input style to use.
Waffle Design SystemBlockstack PBC