Input

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

Import#

import { Input } from '@nature-ui/core';

Usage#

Here's a basic usage example of the Input component:

Editable Example

Changing the size of the Input#

The Input component comes in four sizes. The default is md.

  • sm (32px)
  • md (40px)
  • lg (48px)
Editable Example

Changing the appearance of the input#

The input component comes in 4 variants: outline, unstyled, flushed, and filled. Pass the variant prop and set it to one of these values.

Editable Example

Left and Right Addons#

Add the addonLeft and addonRight to include an addon on the left and or right of the input element.

https://.com+234
Editable Example

Addons also accept JSX Elements.#

$
Editable Example

Password Input Example#

Editable Example

Controlled InputGroup#

"Starting..."
Editable Example

Props#

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

NameTypeDefaultDescription
asReact.ElementTypeinputThe 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.