Input

Used to retrieve user input.

Props

type

stringThe type of input

placeholder

stringThe placeholder text

label

stringLabel above the input

caption

stringInstructions on how to use the field

error

stringError message, replaces caption

disabled

booleanWhether the input is disabled

size

"small" | "medium"The size of the input

value

stringThe value of the input

onChange

functionThe function to call when the input changes

import * as React from "react";
import { Input } from "basics";

export default () => {
  return (
    <Input
      type="password"
      placeholder="Enter your password"
      label="Password"
      caption="Between 12-24 characters"
      size="medium"
      value="1234567"
    />
  );
}

import * as React from "react";
import { Input } from "basics";

export default () => {
  return (
    <Input
      type="password"
      placeholder="Enter your password"
      label="Password"
      caption="Between 12-24 characters"
      size="medium"
      value="1234567"
    />
  );
}

Error


<Input
  type="password"
  value="12345678"
  placeholder="Enter your password"
  label="Password"
  error="Password is too short"
/><Input
  type="password"
  value="12345678"
  placeholder="Enter your password"
  label="Password"
  error="Password is too short"
/>

Disabled


<Input type="password" value="12345678" label="Password" disabled /><Input type="password" value="12345678" label="Password" disabled />

Prefix


<Input prefix={<SearchIcon />} placeholder="Search..." /><Input prefix={<SearchIcon />} placeholder="Search..." />

Suffix


<Input suffix={<Kbd style={{ marginRight: 16 }}>Esc</Kbd>} placeholder="Search..." /><Input suffix={<Kbd style={{ marginRight: 16 }}>Esc</Kbd>} placeholder="Search..." />

Loading

The loading state will replace the suffix with a spinner. The input will also be disabled.


<Input prefix={<SearchIcon />} placeholder="Search..." loading /><Input prefix={<SearchIcon />} placeholder="Search..." loading />

Sizes


<Flex align="center" gap="16">
  <Input placeholder="Search..." />
  <Input size="small" placeholder="Search..." />
</Flex><Flex align="center" gap="16">
  <Input placeholder="Search..." />
  <Input size="small" placeholder="Search..." />
</Flex>