This component will be removed soon.

Replaced by Form.Control

Input

Edit this page Leave feedback

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	22.9.0	1
	frontend-app-learner-portal-enterprise	21.13.1	1
	frontend-app-learner-portal-programs	21.13.1	1
	frontend-app-learning	22.8.1	1
	frontend-app-support-tools	21.13.1	17
	catalog-search	21.13.1	7
	frontend-learner-portal-base	12.2.0	1
	prospectus	20.46.2	1

Edit this page Leave feedback

Contents

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