Version: 3.0.0-next.38

Input

The Input component is a component that is used to get user input in a text field.

Examples#

Basic#

Input Sizes#

Input Variants#

Input Elements#

Password Input#

Controlled Input#

Form Controlled#

Props#

Input#

Name Type Description Default
isInvalid boolean If true, the input will indicate an error. -
variant "outline" | "filled" | "underlined" | "unstyled" | "rounded" The variant of the input style to use. outline
isDisabled boolean If true, the input will be disabled. -
size string The size of the input. md
isRequired boolean - -
isReadOnly boolean If true, prevents the value of the input from being edited. -
isFullWidth boolean If true, the input element will span the full width of its parent -
InputLeftElement Element | Element[] If given, adds the provided element to the left of the input. -
InputRightElement Element | Element[] If given, adds the provided element to the right of the input. -
type string Using the type password, user can mask the input. -
wrapperRef any Ref to be passed to Icon's wrapper Box -
_hover IInputProps Passed props will be applied on hovered state. -
_focus IInputProps Passed props will be applied on focused state. -
_disabled IInputProps Passed props will be applied on disabled state. -
_invalid IInputProps Passed props will be applied on invalid state. -

Input implements PlatformProps, ColorProps, BackgroundProps, View, LayoutProps, FlexProps, TypographyProps, BorderProps, ExtraProps, OutlineProps, ShadowProps

Input.Group#

Name Type Description Default
variant string The variant of the input style to use. outline
size string The size of the input. md

InputGroup implements Box