Input

Instead of HTML native controls, input, textarea.

Import

MainIndividual
import { Input, InputGroup, MaskedInput } from 'rsuite';
  • <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.

Examples

Basic

Size

If you want to use the native DOM size attribute you can use the htmlSize prop. For it to work as expected you will also need to provide the style={{ width: 'auto' }} prop.

<Input htmlSize={10} style={{ width: 'auto' }} />

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
htmlSize number The native HTML size attribute to be passed to the input
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
guide boolean In guide mode or no guide mode
keepCharPositions boolean (false) When true, adding or deleting characters will not affect the position of existing characters.
mask (*) array | function Used to define how to block user input.
placeholderChar string ('_') The placeholder character represents the fillable spot in the mask
showMask boolean When the input value is empty, the mask is displayed as a placeholder instead of a regular placeholder.
Vercel banner