Input

Input fields allow users to enter text into a UI. They typically appear in forms and dialogs.

Basic Input

Preview

Usage


import { Input } from 'archi-ui'


<Input type="text" placeholder='Enter name' />

Variants

The Input comes with three variants: outlined(default), filled, standard.

Preview

Form props

Standard form attributes are supported, for example required, disabled, type, etc.

Preview

First name

Password

Read only

Helper Text

Helper text

First name

Password

Read only

Helper Text

Helper text

First name

Password

Read only

Helper Text

Helper text

code


import React from 'react';
import { FormControl, FormHelperText, Input, Label } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex flex-col items-center justify-center gap-6">
      <div className="flex flex-wrap justify-center gap-2">
        <FormControl>
          <Label required>First name</Label>
          <Input
            type='text'
            placeholder='Standard Required'
            required
            variant='standard'
            id="fname"
          />
        </FormControl>
        <FormControl>
          <Label disabled>First name</Label>
          <Input
            type='text'
            placeholder='Standard disabled'
            disabled
            variant='standard'
            id="fname"
          />
        </FormControl>
        <FormControl>
          <Label>Password</Label>
          <Input
            type='password'
            placeholder='Password'
            variant='standard'
            id="password"
          />
        </FormControl>
        <FormControl>
          <Label>Read only</Label>
          <Input
            type='text'
            placeholder='Read only'
            defaultValue="Read only"
            readOnly
            variant='standard'
            id="readonly"
          />
        </FormControl>
        <FormControl>
          <Label>Search</Label>
          <Input
            type='search'
            placeholder='search'
            variant='standard'
            id="search"
          />
        </FormControl>
        <FormControl>
          <Label>Helper Text</Label>
          <Input
            type='password'
            placeholder='Password'
            id="helpertext"
            defaultValue="Default Value"
            variant='standard'
          />
          <FormHelperText>Helper text</FormHelperText>
        </FormControl>
      </div>
      <div className="flex flex-wrap justify-center gap-2">
        <FormControl>
          <Label required>First name</Label>
          <Input
            type='text'
            placeholder='Outlined Required'
            required
            id="fname"
          />
        </FormControl>
        <FormControl>
          <Label disabled>First name</Label>
          <Input
            type='text'
            placeholder='Outlined disabled'
            disabled
            id="fname"
          />
        </FormControl>
        <FormControl>
          <Label>Password</Label>
          <Input
            type='password'
            placeholder='Password'
            id="password"
          />
        </FormControl>
        <FormControl>
          <Label>Read only</Label>
          <Input
            type='text'
            placeholder='Read only'
            defaultValue="Read only"
            readOnly
            variant='outlined'
            id="readonly"
          />
        </FormControl>
        <FormControl>
          <Label>Search</Label>
          <Input
            type='search'
            placeholder='search'
            variant='outlined'
            id="search"
          />
        </FormControl>
        <FormControl>
          <Label>Helper Text</Label>
          <Input
            type='password'
            placeholder='Password'
            id="helpertext"
            defaultValue="Default Value"
            variant='outlined'
          />
          <FormHelperText>Helper text</FormHelperText>
        </FormControl>
      </div>
      <div className="flex flex-wrap justify-center gap-2">
        <FormControl>
          <Label required>First name</Label>
          <Input
            type='text'
            placeholder='Filled Required'
            variant='filled'
            id="fname"
          />
        </FormControl>
        <FormControl>
          <Label disabled>First name</Label>
          <Input
            type='text'
            placeholder='Filled disabled'
            disabled
            variant='filled'
            id="fname"
          />
        </FormControl>
        <FormControl>
          <Label>Password</Label>
          <Input
            type='password'
            placeholder='Password'
            variant='filled'
            id="password"
          />
        </FormControl>
        <FormControl>
          <Label>Read only</Label>
          <Input
            type='text'
            placeholder='Read only'
            defaultValue="Read only"
            readOnly
            variant='filled'
            id="readonly"
          />
        </FormControl>
        <FormControl>
          <Label>Search</Label>
          <Input
            type='search'
            placeholder='search'
            variant='filled'
            id="search"
          />
        </FormControl>
        <FormControl>
          <Label>Helper Text</Label>
          <Input
            type='password'
            placeholder='Password'
            id="helpertext"
            defaultValue="Default Value"
            variant='filled'
          />
          <FormHelperText>Helper text</FormHelperText>
        </FormControl>
      </div>
    </div>
  );
}

Size

For different size of Input like small, medium, large use size prop.

Preview

Full-width

fullwidth can be used to make the input take up the full width of its container.

Preview

Color

The color prop changes the highlight color of the text field when focused.

Preview

Input Validation

The error prop toggles the error state. The FormHelperText can then be used to provide feedback to the user about the error.

Preview

First name

Incorrect entry.

First name

Incorrect entry.

First name

Incorrect entry.

code


import React from 'react'
import { FormControl, FormHelperText, Input, Label } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex flex-col items-center justify-center gap-6">
      <div className="flex flex-wrap justify-center gap-2">
        <FormControl>
          <Label htmlFor="fname">First name</Label>
          <Input
            type='text'
            placeholder='Standard Error'
            defaultValue="Default Value"
            variant='standard'
            error
          />
        </FormControl>
        <FormControl>
          <Label htmlFor="fname">First name</Label>
          <Input
            type='text'
            placeholder='Standard Error'
            defaultValue="Default Value"
            variant='standard'
            error
          />
          <FormHelperText error>Incorrect entry.</FormHelperText>
        </FormControl>
      </div>
      <div className="flex flex-wrap justify-center gap-2">
        <FormControl>
          <Label htmlFor="fname">First name</Label>
          <Input
            type='text'
            placeholder='Standard Error'
            defaultValue="Default Value"
            variant='filled'
            error
          />
        </FormControl>
        <FormControl>
          <Label htmlFor="fname">First name</Label>
          <Input
            type='text'
            placeholder='Standard Error'
            defaultValue="Default Value"
            variant='filled'
            error
          />
          <FormHelperText error>Incorrect entry.</FormHelperText>
        </FormControl>
      </div>
      <div className="flex flex-wrap justify-center gap-2">
        <FormControl>
          <Label htmlFor="fname">First name</Label>
          <Input
            type='text'
            placeholder='Standard Error'
            defaultValue="Default Value"
            error
          />
        </FormControl>
        <FormControl>
          <Label htmlFor="fname">First name</Label>
          <Input
            type='text'
            placeholder='Standard Error'
            defaultValue="Default Value"
            error
          />
          <FormHelperText error>Incorrect entry.</FormHelperText>
        </FormControl>
      </div>
    </div>
  );
}

Helper Text

Pair the Input with FormHelperText component to add helper text for users to better understand.

Preview

Helper text

Helper Text with Error

Use error prop if you want helpertext to be displayed in an error state.

Preview

Helper text

FormControl

Provides context such as variant/color/size/error/required/disabled/fullwidth for form inputs. Relying on the context provides high flexibility and ensures that the state always stays consistent across the children of the FormControl.

This context is used by following components:

Label
FormHelperText
Input
PinInput
Textarea

Preview

First name

Helper Text

Helper text

First name

Helper Text

Helper text

First name

Helper Text

Helper text

code


import React from 'react'
import { FormControl, FormHelperText, Input, Label } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      <div className="flex flex-wrap justify-center gap-2">
        <FormControl variant='standard' required>
          <Label>First name</Label>
          <Input
            type='text'
            placeholder='Standard Required'
            id="fname"
          />
        </FormControl>
        <FormControl variant='standard' disabled>
          <Label>First name</Label>
          <Input
            type='text'
            placeholder='Standard disabled'
            id="fname"
          />
        </FormControl>
        <FormControl variant='standard' error>
          <Label>Helper Text</Label>
          <Input
            type='text'
            placeholder='Standard error'
            id="helpertext"
            defaultValue="Default Value"
          />
          <FormHelperText>Helper text</FormHelperText>
        </FormControl>
      </div>
      <div className="flex flex-wrap justify-center gap-2">
        <FormControl variant='outlined' required>
          <Label>First name</Label>
          <Input
            type='text'
            placeholder='Outlined Required'
            id="fname"
          />
        </FormControl>
        <FormControl variant='outlined' disabled>
          <Label>First name</Label>
          <Input
            type='text'
            placeholder='Outlined disabled'
            id="fname"
          />
        </FormControl>
        <FormControl variant='outlined' error>
          <Label>Helper Text</Label>
          <Input
            type='text'
            placeholder='Standard error'
            id="helpertext"
            defaultValue="Default Value"
            variant='outlined'
          />
          <FormHelperText>Helper text</FormHelperText>
        </FormControl>
      </div>
      <div className="flex flex-wrap justify-center gap-2">
        <FormControl variant='filled' required>
          <Label>First name</Label>
          <Input
            type='text'
            placeholder='Filled Required'
            id="fname"
          />
        </FormControl>
        <FormControl variant='filled' disabled>
          <Label>First name</Label>
          <Input
            type='text'
            placeholder='Filled disabled'
            id="fname"
          />
        </FormControl>
        <FormControl variant='filled' error>
          <Label>Helper Text</Label>
          <Input
            type='text'
            placeholder='Standard error'
            id="helpertext"
            defaultValue="Default Value"
          />
          <FormHelperText>Helper text</FormHelperText>
        </FormControl>
      </div>
    </div>
  );
}

Uncontrolled vs. Controlled

The component can be controlled or uncontrolled.

A component is controlled when it’s managed by its parent using props.
A component is uncontrolled when it’s managed by its own local state.

Preview

Input Addornment

Use the InputGroup and InputAdornment components to add an addon to the input.

Preview

https://

.com

+91

Leading and Tailing Icons

Use the leadingIcon and tailingIcon to add icons to the start and end of the input.

Preview

USD

Textarea

Preview

Input API

API reference docs for the React Input componenet.

Name	Type	Default	Description
className	`string`	-	Override or extend the styles applied to the component.
type	`string`	-	Type of the input element. It should be a valid HTML5 input type.
variant	`'filled' \| 'outlined' \| 'standard'`	`'outlined'`	The variant to use.
color	`'primary' \| 'secondary' \| 'info' \| 'warning' \| 'success' \| 'error'`	`'primary'`	The color of the componenet.
fullwidth	`bool`	`false`	If `true`, the input will take up the full width of its container.
size	`'sm' \| 'md' \| 'lg'`	`'md'`	The size of the component.
autoFocus	`bool`	-	If `true`, the input element is focused during the first mount.
defaultValue	`any`	-	The default value. Use when the component is not controlled.
disabled	`bool`	-	If `true`, the component is disabled.
error	`bool`	`false`	If `true`, the input will indicate an error.
onChange	`func`	-	Callback fired when the state is changed. Signature: `function(event: React.changeEvent) => void`. You can pull out the new value by accessing event.target.value (string).
placeholder	`string`	-	The short hint displayed in the input before the user enters a value.
readOnly	`bool`	-	It prevents the user from changing the value of the field (not from interacting with the field).
required	`bool`	`false`	If `true`, the `input` element is required.
value	`any`	-	The value of the input element, required for a controlled component.
leadingIcon	`node`	-	Icon to display at begin of an input.
tailingIcon	`node`	-	Icon to display at end of an input.