Input

Instead of HTML native controls, input, textarea.

  • <Input> The input box component.
  • <InputGroup> The input box combination component.
  • <InputGroup.Button> Combined with the button.
  • <InputGroup.Addon> Custom additional elements.
  • <MaskedInput> The input box component with mask.

Import 

import { Input, InputGroup, MaskedInput } from 'rsuite';

// or
import Input from 'rsuite/Input';
import InputGroup from 'rsuite/InputGroup';
import MaskedInput from 'rsuite/MaskedInput';

Examples

Basic

Size

Textarea

Disabled and read only

Input Group

Inside

With Button

Password

With Tooltip

Masked Input

MaskedInput is an input mask component. It can create input masks for phone numbers, dates, currencies, zip codes, percentages, emails, and almost anything.

Props

<Input>

Property Type (Default) Description
classPrefix string ('input') The prefix of the component CSS class
defaultValue string Default value
disabled boolean Disabled component
onChange (value: string, event) => void The callback function in which value is changed.
size 'lg' | 'md' | 'sm' | 'xs' ('md') An input can have different sizes
type string ('text' ) HTML input type
value string Value (Controlled)

<InputGroup>

Property Type (Default) Description
classPrefix string ('input-group') The prefix of the component CSS class
inside boolean Sets the composition content internally
size 'lg' | 'md' | 'sm' | 'xs' ('md') An input group can have different sizes

<MaskedInput>

MaskedInput extends all props of Input. But does not have the type prop.

Property Type (Default) Description
mask (*) array | function Used to define how to block user input.
guide boolean In guide mode or no guide mode
placeholderChar string ('_') The placeholder character represents the fillable spot in the mask
keepCharPositions boolean (false) When true, adding or deleting characters will not affect the position of existing characters.
showMask boolean When the input value is empty, the mask is displayed as a placeholder instead of a regular placeholder.
Vercel banner