<Input> Component

<Input> is an interactive control in order to accept data from the user.

There are some specialized types of <Input> with built in validation corresponding to the data type:

  • <TextInput> or <Text>
  • <SearchInput> or <Search>
  • <PasswordInput> or <Password>
  • <EmailInput> or <Email>
  • <TelInput> or <Tel>
  • <UrlInput> or <Url>
  • <NumberInput> or <Number>
  • <TimeInput> or <Time>
  • <WeekInput> or <Week>
  • <DateInput> or <Date>
  • <DateTimeInput> or <DateTime>
  • <MonthInput> or <Month>

Here the demo:

Preview

Installing <Input> Component

There are 2 ways to install <Input> component into your react app project:

  • Install the Specific Package of <Input> Component
  • Install the Whole Reusable-UI Component Pack, including the <Input> Component

Variant Properties

The alternative appearances of the <Input> layout without changing the <Input>'s functionality.

size Property

Defines the alternative size of the <Input>.

The possible values are:

  • undefined
  • 'sm'
  • 'md'
  • 'lg'

Here the preview:

Preview

Show code

theme Property

Defines the contextual theme of the <Input>.

The possible values are:

  • undefined
  • 'primary'
  • 'secondary'
  • 'success'
  • 'info'
  • 'warning'
  • 'danger'
  • 'light'
  • 'dark'

Here the preview:

Preview

Show code

gradient Property

Activates a 3D mode of the <Input>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview

Show code

outlined Property

Activates an outlined mode (background-less, contrast foreground, and contrast border) of the <Input>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview

Show code

mild Property

Activates a mild mode (mild background, contrast foreground, and contrast border) of the <Input>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview

Show code

nude Property

Activates an nude mode (background-less, padding-less, and border-less) of the <Input>.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview

Show code

State Properties

The conditions of the <Input> behavior or functionality.

enabled Property

Defines the enabled/disabled state of the <Input>.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview

Show code

inheritEnabled Property

Influences the <Input>'s disabled state by <ancestor enabled={false}>.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview

Show code

readOnly Property

Defines the readOnly/mutable state of the <Input>.

The possible values are:

  • undefined
  • true
  • false

inheritReadOnly Property

Influences the <Input>'s readOnly by <ancestor readOnly={true}>.

The possible values are:

  • undefined
  • true
  • false

enableValidation Property

Activates the valid/invalid indicator of the <Input>.

The possible values are:

  • undefined
  • true
  • false

isValid Property

Marks the validity status of the <Input>.

The possible values are:

  • undefined
  • null
  • true
  • false

Here the preview:

Preview

Show code

inheritValidation Property

Influences the <Input>'s valid/invalid indicator by <ancestor isValid={true|false} enableValidation={true}>.

The possible values are:

  • undefined
  • true
  • false

Variables

There are several variables of <Input> you can customize. Changing the variables affects all <Input> instance and other components that depend on <Input>.

Here the exposed variables:

  • Appearances
  • Backgrounds, Foregrounds, Borders, & Rings

The example of accessing, modifying, & adding variables:

Show code