Input

Used for receiving and displaying single-line text input from the user.

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' }} />

Disabled and read only

Input Group

Inside

With Button

Search

With Loader

With Dropdown

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
as ElementType ('input') You can use a custom element type for this component
classPrefix string ('input') The prefix of the component CSS class
defaultValue string Default value (uncontrolled)
disabled boolean Render the component in a disabled state
htmlSize number Sets the native HTML size attribute.
id string The HTML input id
inputRef Ref A ref that points to the input element
onChange (value: string, event) => void Callback function when value changes
plaintext boolean Render the input as plaintext. Shows placeholder when value is empty
readOnly boolean Render the component in a read-only state
size 'lg' | 'md' | 'sm' | 'xs' ('md') An input can have different sizes
type string ('text') HTML input type
value string Current value (controlled)

<InputGroup>

Property Type (Default) Description
as ElementType ('div') You can use a custom element type for this component
classPrefix string ('input-group') The prefix of the component CSS class
disabled boolean Render the input group in a disabled state
inside boolean Sets the composition content internally
size 'lg' | 'md' | 'sm' | 'xs' ('md') An input group can have different sizes

<InputGroup.Button>

Property Type (Default) Description
classPrefix string ('input-group-btn') The prefix of the component CSS class
... ButtonProps Extends all props from <Button> component

<InputGroup.Addon>

Property Type (Default) Description
as ElementType ('span') You can use a custom element type for this component
classPrefix string ('input-group-addon') The prefix of the component CSS class

<MaskedInput>

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.
... InputProps Extends all props from <Input> component. But does not have the type prop.