Text Input

Examples

Default

Test label

Code

1<TextInput id="test-control-1" label="Test label" width="l" onChange={() => {}} />

With value set

Test label

Code

1<TextInput
2    id="test-control-2"
3    label="Test label" width="l" onChange={() => {}}
4    value="Test value"
5/>

With support text

Test label

This is support text

Code

1<TextInput
2    label="Test label" width="l" onChange={() => {}}
3    supportText="This is support text"
4/>

With field declaration

Test label (required)

Test label (optional)

Code

1<TextInput
2    id="test-control-4r"
3    label="Test label" width="l" onChange={() => {}}
4    declaration="required"
5/>
6
7<TextInput
8    id="test-control-4o"
9    label="Test label" width="l" onChange={() => {}}
10    required={false}
11    declaration="optional"
12/>

With a different form control size applied

Test label

Code

1<TextInput id="test-control-5-s" label="Test label" width="l" onChange={() => {}} size="small" value="Test value" />
2<TextInput id="test-control-5-d" label="Test label" width="l" onChange={() => {}} value="Test value" />
3<TextInput id="test-control-5-l" label="Test label" width="l" onChange={() => {}} size="large" value="Test value" />

With a different label size applied

Test label

Code

1<TextInput id="test-control-6-s" label="Test label" width="l" onChange={() => {}} labelSize="small" value="Test value" />
2<TextInput id="test-control-6-d" label="Test label" width="l" onChange={() => {}} labelSize="default" value="Test value" />
3<TextInput id="test-control-6-l" label="Test label" width="l" onChange={() => {}} labelSize="large" value="Test value" />

With label element hidden

Test label

Code

1<TextInput
2    id="test-control-7"
3    label="Test label" width="l" onChange={() => {}}
4    labelHidden
5/>

With label context applied

Test label When typing a suggested list of options will appear, use arrow keys to operate

Code

1<TextInput
2    id="test-control-8"
3    label="Test label" width="l" onChange={() => {}}
4    labelContext="When typing a suggested list of options will appear, use arrow keys to operate"
5/>

With a specific width set

Title

Days

Test label

Code

1<TextInput id="test-control-9-xxs" label="Title" onChange={() => {}} width="xxs" value="Mr" />
2<TextInput id="test-control-9-xs" label="Days" onChange={() => {}} width="xs" value="23" />
3<TextInput id="test-control-9-s" label="Test label" onChange={() => {}} width="s" value="Test value" />
4<TextInput id="test-control-9-m" label="Test label" onChange={() => {}} width="m" value="Test value" />
5<TextInput id="test-control-9-l" label="Test label" onChange={() => {}} width="l" value="Test value" />
6<TextInput id="test-control-9-xl" label="Test label" onChange={() => {}} width="xl" value="Test value" />
7<TextInput id="test-control-9-xxl" label="Test label" onChange={() => {}} width="xxl" value="Test value" />
8<TextInput id="test-control-9-full" label="Test label" onChange={() => {}} width="full" value="Test value" />

With error validation

Test label

This is error text

Code

1<TextInput
2    id="test-control-10"
3    label="Test label" width="l" onChange={() => {}}
4    error
5    errorText="This is error text"
6    value="Test value"
7/>

As a disabled form control

Test label

Code

1<TextInput
2    id="test-control-11"
3    label="Test label" width="l" onChange={() => {}}
4    disabled
5    value="Test value"
6/>

With contextual action

Test label

Code

1<TextInput
2    id="test-control-12"
3    label="Test label" width="l" onChange={() => {}}
4    labelAction={() => {}}
5    labelActionText="Contextual action"
6    value="Test value"
7    width="l"
8/>

As a text input for numbers

Test label

Code

1<TextInput
2    id="test-control-13"
3    label="Test label" width="l" onChange={() => {}}
4    inputMode="numeric"
5    pattern="[0-9]*"
6/>

Development

Import by:

1import { TextInput } from '@parsley_design_systems/design-system'

Available props

Props for the TextInput component
Property	Type	Default	Required	Description
label	string		true	The primary content to describe the form control, the label must display a meaningful description to ensure the form control is correctly understood by users.
id	string		true	The unique id of the form control.
onChange	function		true	Fires the onChange event of the form control.
className	string		false	Allows for specific classNames to be set.
name	string		false	The name of the form control.
value	string		false	Displays a pre-defined value for the form control. If no value is set the form control outputs a placeholder if set or is empty.
size	oneOf: default \| small \| large	default	false	Sets the size of the form control and the associated label text, this prop controls the font size and padding of the form control. If not set "default" is output as the default setting.
width	oneOf: See Sizing for form width tokens.	default	false	Sets the width of the form control, this props controls the width of the form control. If not set width defaults to 100%.
containerWidth	boolean		true	Controls where the width is defined - true is for the width applied to the component parent container which then limits the width of the label, form control, error and support text. The default is false which sets the width only on the form control.
required	boolean		true	A boolean that applies an aria-required value on the form control.
declaration	required \| option			Displays required or optional text next to the associated label.
disabled	boolean		false	The disabled state of the form control.
error	boolean		false	The error state of the form control.
errorText	string		false	Provides the error message to be presented to users to help them correct the erroneous form control. This value will only be output when the "error" boolean props is set to true.
labelSize	oneOf: default \| small \| large	default	false	Sets the size of the label, this props controls the font size of the label. If not set "default" is output as the default setting.
labelHidden	boolean	false	false	A boolean that visually hides the form control label. This should only be considered if the form control is clearly described by adjacent content/labels.
labelContext	string		false	Allows for additional instructions to be inserted into the label element, this content is visually hidden and can be used to provide additional context to a form control for assistive technolgy users.
labelAction	function		false	Provides the function to initiate the contextual action.
labelActionText	ReactNode		false	Provides the content of the contextual action.
supportText	string		false	Allows for support text to be displayed underneath the title identifier, this is recommended for additional context is required that will benefit all users. As an example this can be used to convey specific formats like date strings.
ref	string		false	Allows a ref to be set on the form control.
Other attributes	Allowable attributes			The following attributes can be used when required, these attributes are all valid HTML5 attributes. Allowed attributes: autocomplete inputmode maxLength minLength name pattern spellcheck

Text Input

Examples

Default

Code

With value set

Code

With support text

Code

With field declaration

Code

With a different form control size applied

Code

With a different label size applied

Code

With label element hidden

Code

With label context applied

Code

With a specific width set

Code

With error validation

Code

As a disabled form control

Code

With contextual action

Code

As a text input for numbers

Code

Design

Problem

Solution

Guidance

Development

Available props