This component will be removed soon.

Replaced by Form.Control

Input

A component for all user input. It is responsible for rendering select, textarea, and inputs of any type with the appropriate bootstrap class name.

Extra props supplied to Input will be passed through to the html node.

Text

Show editable code example

Any Paragon component or export may be added to the code example.

<Input type="text" defaultValue="Some text input" />

<Input type="text" defaultValue="Some text input" />

Select

Show editable code example

Any Paragon component or export may be added to the code example.

<Input
  type="select"
  defaultValue="Foo Bar"
  options={[
    { value: 'Foo Bar', label: 'Foo Bar' },
    { value: 'Foos Bar', label: 'Bar foo' },
    { value: 'Foo sBar', label: 'FoBaro' },
    { value: 'Foo ssBar', label: 'Farboo' },
    {
      label: 'But there is more',
      group: [
        { value: 'vFoo Bar', label: 'Foov Bar' },
        { value: 'vFoos Bar', label: 'Barv foo' },
        { value: 'vFoo sBar', label: 'FoBarov' },
        { value: 'vFoo ssBar', label: 'Farboov' },
      ],
    },
  ]}
/>

<Input
  type="select"
  defaultValue="Foo Bar"
  options={[
    { value: 'Foo Bar', label: 'Foo Bar' },
    { value: 'Foos Bar', label: 'Bar foo' },
    { value: 'Foo sBar', label: 'FoBaro' },
    { value: 'Foo ssBar', label: 'Farboo' },
    {
      label: 'But there is more',
      group: [
        { value: 'vFoo Bar', label: 'Foov Bar' },
        { value: 'vFoos Bar', label: 'Barv foo' },
        { value: 'vFoo sBar', label: 'FoBarov' },
        { value: 'vFoo ssBar', label: 'Farboov' },
      ],
    },
  ]}
/>

Textarea

Show editable code example

Any Paragon component or export may be added to the code example.

<Input
  type="textarea"
  defaultValue="Hammock semiotics pok pok jianbing venmo, crucifix taiyaki stumptown irony ennui knausgaard bitters synth slow-carb iPhone."
/>

<Input
  type="textarea"
  defaultValue="Hammock semiotics pok pok jianbing venmo, crucifix taiyaki stumptown irony ennui knausgaard bitters synth slow-carb iPhone."
/>

Date

Show editable code example

Any Paragon component or export may be added to the code example.

<Input type="date" />

<Input type="date" />

File

Show editable code example

Any Paragon component or export may be added to the code example.

<Input type="file" />

<Input type="file" />

Range

Show editable code example

Any Paragon component or export may be added to the code example.

<Input type="range" />

<Input type="range" />

Props API#

Input Props API

type enum'textarea' | 'select' | 'checkbox' | 'color' | 'date' | 'datetime' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' Required
specifies the type of component. One of select, textarea, or any valid type for an html input tag.
className string
specifies the className in addition to a bootstrap class name.
options shape {
label: string | number,
value: string | number,
disabled: bool,
group: shape {
label: string | number,
value: string | number,
disabled: bool,
}[],
}[]
should be used to specify the options of an Input of type select
Default[]

Usage Insights#

Input

	Project Name	Paragon Version	Instance Count
	frontend-app-account	20.28.5	1
	frontend-app-admin-portal	20.26.3	20
	frontend-app-learner-portal-enterprise	20.31.1	1
	frontend-app-learner-portal-programs	20.28.4	1
	frontend-app-learning	20.28.4	1
	frontend-app-support-tools	20.26.0	17
	catalog-search	19.25.1	6
	frontend-learner-portal-base	12.2.0	1
	prospectus	20.28.3	3

Contents

Text
Select
Textarea
Date
- File
- Range
Props API
Usage Insights