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:

<Input placeholder="Basic usage" />

Changing the size of the Input#

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

sm (32px)
md (40px)
lg (48px)

<Stack col>
  <Input placeholder="small size" size="sm" />
  <Input placeholder="medium size" size="md" />
  <Input placeholder="large size" size="lg" />
</Stack>

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.

<Stack col>
  <Input variant="outline" placeholder="Outline" />
  <Input variant="filled" placeholder="Filled" />
  <Input variant="flushed" placeholder="Flushed" />
  <Input variant="unstyled" placeholder="Unstyled" />
</Stack>

Left and Right Addons#

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

<Stack col>
  <Input
    placeholder="your-website"
    defaultValue="divinehycenth"
    addonLeft="https://"
    addonRight=".com"
  />

  <Input
    placeholder="Phone number..."
    type="number"
    addonLeft="+234"
    size="sm"
  />
</Stack>

Addons also accept JSX Elements.#

<Stack col>
  <Input
    placeholder="Phone number"
    type="tel"
    addonLeft={<PhoneIcon className="text-gray-400" />}
  />

  <Input
    placeholder="Enter amount"
    type="number"
    addonLeft="$"
    addonRight={<CheckIcon color="green" />}
  />
</Stack>

Password Input Example#

function PasswordInput() {
  const [show, setShow] = React.useState(false);
  const handleClick = () => setShow(!show);

  return (
    <Input
      placeholder="Enter password"
      type={show ? "text" : "password"}
      addonRight={
        <button variant="link" onClick={handleClick}>
          {show ? "Hide" : "Show"}
        </button>
      }
    />
  );
}

Controlled InputGroup#

function Example() {
  const [value, setValue] = React.useState("Starting...");
  const handleChange = (event) => setValue(event.target.value);

  return (
    <>
      <Input
        value={value}
        onChange={handleChange}
        placeholder="Controlled input"
      />
      <pre>{JSON.stringify(value, null, 2)}</pre>
    </>
  );
}

Props#

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

Name	Type	Default	Description
`as`	`React.ElementType`	`input`	The component to use in place of `input`.
`aria-label`	`string`		Accessibility label to use, in scenarios where the input has no visible label. A11y: It's usefult for screen readers.
`aria-describedby`	`string`		Accessibility label to use, in scenarios where the input has no visible label. A11y: It's usefult for screen readers.
`isDisabled`	`boolean`	`false`	If `true`, the input will be disabled. This sets `aria-disabled=true` and you can style this state by passing `_disabled` prop.
`isInvalid`	`boolean`	`false`	If `true`, the `input` will indicate an error. This sets `aria-invalid=true` and you can style this state by passing `_invalid` prop.
`isRequired`	`boolean`	`false`	If `true`, the input element will be required.
`isFullWidth`	`boolean`	`false`	If `true`, the input element will span the full width of it's parent.
`isReadOnly`	`boolean`	`false`	If `true`, prevents the value of the input from being edited.
`size`	`sm`, `md`, `lg`	`md`	The visual size of the `input` element.
`variant`	`outline`, `unstyled`, `flushed`, `filled`	`outline`	The variant of the input style to use.