Text field - Intelligence Community Design System

Skip to page content

Show navigation section

Component demo

Interactive example

Web component

React

Show full code

<ic-text-field
label="What is your favourite coffee?"
placeholder="Please enter…"
helper-text="Such as Arabica, Robusta or Liberica"
></ic-text-field>

<IcTextField
label="What is your favourite coffee?"
placeholder="Please enter…"
helperText="Such as Arabica, Robusta or Liberica"
onIcChange={(ev)=>console.log(ev.detail.value)}
/>

Text field details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property label Attribute label	The label for the input. Required type: string
Property autocapitalize Attribute autocapitalize	The automatic capitalisation of the text value as it is entered/edited by the user. Available options: "off", "none", "on", "sentences", "words", "characters". type: string \| undefined	"off"
Property autocomplete Attribute autocomplete	The state of autocompletion the browser can apply on the text value. type: IcAutocompleteTypes - IcAutocompleteTypes \| undefined	"off"
Property autocorrect Attribute autocorrect	The state of autocorrection the browser can apply when the user is entering/editing the text value. type: IcAutocorrectStates - "off" \| "on" \| undefined	"off"
Property autofocus Attribute autofocus	If`true` , the form control will have input focus when the page loads. type: boolean \| undefined	false
Property debounce Attribute debounce	The amount of time, in milliseconds, to wait to trigger the`icChange` event after each keystroke. type: number - number \| undefined	0
Property disabled Attribute disabled	If`true` , the disabled state will be set. type: boolean - boolean \| undefined	false
Property fullWidth Attribute full-width	Specify whether the text field fills the full width of the container. If`true` , this overrides the --input-width CSS variable. type: boolean - boolean \| undefined	false
Property helperText Attribute helper-text	The helper text that will be displayed for additional field guidance. type: string - string \| undefined	""
Property hideCharCount Attribute hide-char-count	If`true` , the character count which is displayed when`maxCharacters` is set will be visually hidden. type: boolean - boolean \| undefined	false
Property hideLabel Attribute hide-label	If`true` , the label will be hidden and the required label value will be applied as an aria-label. type: boolean - boolean \| undefined	false
Property inputId Attribute input-id	The ID for the input. type: string - string \| undefined	`ic-text-field-input-${inputIds++}`
Property inputmode Attribute inputmode	A hint to the browser for which keyboard to display. Possible values:`"none"` ,`"text"` ,`"tel"` ,`"url"` ,`"email"` ,`"numeric"` ,`"decimal"` , and`"search"` . type: IcTextFieldInputModes - "decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url" \| undefined	"text"
Property max Attribute max	The maximum number that can be accepted as a value, when`type` is`number` and`rows` is`1` . (NOTE: Ensure to include visual indication of max value in`helperText` or`label` ) type: string \| number - number \| string \| undefined
Property maxCharacters Attribute max-characters	The count of characters in the field. Will display a warning if the bound is reached. (NOTE: If the value of the text field has been set using the`value` prop, it will be truncated to this number of characters) type: number - number \| undefined	0
Property min Attribute min	The minimum number that can be accepted as a value, when`type` is`number` and`rows` is`1` . (NOTE: Ensure to include visual indication of min value in`helperText` or`label` ) type: string \| number - number \| string \| undefined
Property minCharacters Attribute min-characters	The minimum number of characters that can be entered in the field. type: number - number \| undefined	0
Property name Attribute name	The name of the control, which is submitted with the form data. type: string - string \| undefined	this.inputId
Property placeholder Attribute placeholder	The placeholder value to be displayed. type: string - string \| undefined	""
Property readonly Attribute readonly	If`true` , the read only state will be set. type: boolean - boolean \| undefined	false
Property required Attribute required	If`true` , the input will require a value. type: boolean - boolean \| undefined	false
Property resize Attribute resize	If`true` , the multiline text area will be resizeable. type: boolean - boolean \| undefined	false
Property rows Attribute rows	The number of rows to transform the text field into a text area with a specific height. type: number - number \| undefined	1
Property size Attribute size	The size of the text field component. type: IcSizesNoLarge - "medium" \| "small" \| undefined	"medium"
Property spellcheck Attribute spellcheck	If`true` , the value of the text field will have its spelling and grammar checked. type: boolean \| undefined	false
Property theme Attribute theme	Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component. type: IcThemeMode - "dark" \| "inherit" \| "light" \| undefined	"inherit"
Property type Attribute type	The type of control to display. The default type is text. type: IcTextFieldTypes - "email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "url" \| undefined	"text"
Property validationInline Attribute validation-inline	If`true` , the icon in input control will be displayed - only applies when validationStatus ='success'. type: boolean - boolean \| undefined	false
Property validationStatus Attribute validation-status	The validation state - e.g. 'error' \| 'warning' \| 'success'. type: IcInformationStatusOrEmpty - "" \| "error" \| "success" \| "warning" \| undefined	""
Property validationText Attribute validation-text	The validation state - e.g. 'error' \| 'warning' \| 'success'. type: string - string \| undefined	""
Property value Attribute value	The value of the text field. type: string	""

Property

label

Attribute

label

The label for the input.

Required

type: string

Property

autocapitalize

Attribute

autocapitalize

The automatic capitalisation of the text value as it is entered/edited by the user. Available options: "off", "none", "on", "sentences", "words", "characters".

type: string | undefined

Default: "off"

Property

autocomplete

Attribute

autocomplete

The state of autocompletion the browser can apply on the text value.

type: IcAutocompleteTypes - IcAutocompleteTypes | undefined

Default: "off"

Property

autocorrect

Attribute

autocorrect

The state of autocorrection the browser can apply when the user is entering/editing the text value.

type: IcAutocorrectStates - "off" | "on" | undefined

Default: "off"

Property

autofocus

Attribute

autofocus

Iftrue , the form control will have input focus when the page loads.

type: boolean | undefined

Default: false

Property

debounce

Attribute

debounce

The amount of time, in milliseconds, to wait to trigger theicChange event after each keystroke.

type: number - number | undefined

Default: 0

Property

disabled

Attribute

disabled

Iftrue , the disabled state will be set.

type: boolean - boolean | undefined

Default: false

Property

fullWidth

Attribute

full-width

Specify whether the text field fills the full width of the container. Iftrue , this overrides the --input-width CSS variable.

type: boolean - boolean | undefined

Default: false

Property

helperText

Attribute

helper-text

The helper text that will be displayed for additional field guidance.

type: string - string | undefined

Default: ""

Property

hideCharCount

Attribute

hide-char-count

Iftrue , the character count which is displayed whenmaxCharacters is set will be visually hidden.

type: boolean - boolean | undefined

Default: false

Property

hideLabel

Attribute

hide-label

Iftrue , the label will be hidden and the required label value will be applied as an aria-label.

type: boolean - boolean | undefined

Default: false

Property

inputId

Attribute

input-id

The ID for the input.

type: string - string | undefined

Default: `ic-text-field-input-${inputIds++}`

Property

inputmode

Attribute

inputmode

A hint to the browser for which keyboard to display. Possible values:"none" ,"text" ,"tel" ,"url" ,"email" ,"numeric" ,"decimal" , and"search" .

Default: "text"

Property

max

Attribute

max

The maximum number that can be accepted as a value, whentype isnumber androws is1 . (NOTE: Ensure to include visual indication of max value inhelperText orlabel )

type: string | number - number | string | undefined

Property

maxCharacters

Attribute

max-characters

The count of characters in the field. Will display a warning if the bound is reached. (NOTE: If the value of the text field has been set using thevalue prop, it will be truncated to this number of characters)

type: number - number | undefined

Default: 0

Property

min

Attribute

min

The minimum number that can be accepted as a value, whentype isnumber androws is1 . (NOTE: Ensure to include visual indication of min value inhelperText orlabel )

type: string | number - number | string | undefined

Property

minCharacters

Attribute

min-characters

The minimum number of characters that can be entered in the field.

type: number - number | undefined

Default: 0

Property

name

Attribute

name

The name of the control, which is submitted with the form data.

type: string - string | undefined

Default: this.inputId

Property

placeholder

Attribute

placeholder

The placeholder value to be displayed.

type: string - string | undefined

Default: ""

Property

readonly

Attribute

readonly

Iftrue , the read only state will be set.

type: boolean - boolean | undefined

Default: false

Property

required

Attribute

required

Iftrue , the input will require a value.

type: boolean - boolean | undefined

Default: false

Property

resize

Attribute

resize

Iftrue , the multiline text area will be resizeable.

type: boolean - boolean | undefined

Default: false

Property

rows

Attribute

rows

The number of rows to transform the text field into a text area with a specific height.

type: number - number | undefined

Default: 1

Property

size

Attribute

size

The size of the text field component.

type: IcSizesNoLarge - "medium" | "small" | undefined

Default: "medium"

Property

spellcheck

Attribute

spellcheck

Iftrue , the value of the text field will have its spelling and grammar checked.

type: boolean | undefined

Default: false

Property

theme

Attribute

theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light" | undefined

Default: "inherit"

Property

type

Attribute

type

The type of control to display. The default type is text.

Default: "text"

Property

validationInline

Attribute

validation-inline

Iftrue , the icon in input control will be displayed - only applies when validationStatus ='success'.

type: boolean - boolean | undefined

Default: false

Property

validationStatus

Attribute

validation-status

The validation state - e.g. 'error' | 'warning' | 'success'.

type: IcInformationStatusOrEmpty - "" | "error" | "success" | "warning" | undefined

Default: ""

Property

validationText

Attribute

validation-text

The validation state - e.g. 'error' | 'warning' | 'success'.

type: string - string | undefined

Default: ""

Property

value

Attribute

value

The value of the text field.

type: string

Default: ""

Slots

A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.

Content can be slotted into a component by adding it as a top-level child of the component.

Slots can have a name to identify them. These specify which slot the content will be inserted into, and therefore where it will be rendered and how it will be used within the component. The name of the slot to be used can be specified by passing it via a slot attribute on the slotted content.

Name	Description
Slot icon	Content will be placed to the left of the text input.

CSS Custom Properties

Name	Description
--input-width	Width of the input field

--input-width Width of the input field

Events

All components also accept native events supported by the DOM, such as onClick and onKeyDown .

Name	Description	Signature
Web component icBlur React onIcBlur	Emitted when input loses focus.	IcValueEventDetail
Web component icChange React onIcChange	Emitted when the value has changed.	IcValueEventDetail
Web component icFocus React onIcFocus	Emitted when input gains focus.	IcValueEventDetail
Web component icInput React onIcInput	Emitted when a keyboard input occurred.	IcValueEventDetail
Web component icKeydown React onIcKeydown	Emitted when a keydown event occurred.	{ event: KeyboardEvent; }

Web component

icBlur

React

onIcBlur

Emitted when input loses focus.

IcValueEventDetail

Web component

icChange

React

onIcChange

Emitted when the value has changed.

IcValueEventDetail

Web component

icFocus

React

onIcFocus

Emitted when input gains focus.

IcValueEventDetail

Web component

icInput

React

onIcInput

Emitted when a keyboard input occurred.

IcValueEventDetail

Web component

icKeydown

React

onIcKeydown

Emitted when a keydown event occurred.

{ event: KeyboardEvent; }

Methods

Name	Description	Signature
Method setFocus	Sets focus on the native `input`.	setFocus() => Promise<void>

Method

setFocus

Sets focus on the native `input`.

setFocus() => Promise<void>

Variants

With icon, value and max length

Interactive example

Web component

React

Show full code

<ic-text-field
max-characters="25"
value="Arabica"
label="What is your favourite coffee?"
required="true"
placeholder="Please enter…"
helper-text="Such as Arabica, Robusta or Liberica"
>
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="#000000"
>
<pathd="M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z"/>
</svg>
</ic-text-field>

<IcTextField
maxCharacters={25}
value="Arabica"
label="What is your favourite coffee?"
required
placeholder="Please enter…"
helperText="Such as Arabica, Robusta or Liberica"
>
<SlottedSVG
slot="icon"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="#000000"
>
<pathd="M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z"/>
</SlottedSVG>
</IcTextField>

Disabled

Interactive example

Web component

React

Show full code

<ic-text-field
label="What is your favourite coffee?"
required="true"
placeholder="Please enter…"
disabled="true"
>
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="#000000"
>
<pathd="M0 0h24v24H0z"fill="none"/>
<pathd="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"/>
</svg>
</ic-text-field>

<IcTextField
label="What is your favourite coffee?"
required
placeholder="Please enter…"
disabled
>
<SlottedSVG
slot="icon"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="#000000"
>
<pathd="M0 0h24v24H0z"fill="none"/>
<pathd="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"/>
</SlottedSVG>
</IcTextField>

Size small

Interactive example

Web component

React

Show full code

<ic-text-field
label="What is your favourite coffee?"
placeholder="Please enter…"
size="small"
></ic-text-field>

<IcTextField
label="What is your favourite coffee?"
placeholder="Please enter…"
size="small"
onIcChange={(ev)=>console.log(ev.detail.value)}
/>

Validation

Interactive example

Web component

React

Show full code

<ic-text-field
validation-status="success"
validation-text="Good choice!"
value="Arabica"max-characters="25"
label="What is your favourite coffee?"
required="true"placeholder="Please enter…"
helper-text="Such as Arabica, Robusta or Liberica"
></ic-text-field>
<ic-text-field
validation-status="success"
validation-text="Good choice!"
validation-inline="true"
value="Arabica"
max-characters="25"
label="What is your favourite coffee?"
required="true"placeholder="Please enter…"
helper-text="Such as Arabica, Robusta or Liberica"
></ic-text-field>
<ic-text-field
validation-status="warning"
validation-text="There’s only a few left! Order now to avoid missing out."
value="Arabica"
max-characters="25"
label="What is your favourite coffee?"
required="true"
placeholder="Please enter…"
helper-text="Such as Arabica, Robusta or Liberica"
></ic-text-field>
<ic-text-field
validation-status="error"
validation-text="now it has really gone to (coffee) pot"
value="Tea"
max-characters="25"
label="What is your favourite coffee?"
required="true"
placeholder="Please enter…"
helper-text="Such as Arabica, Robusta or Liberica"
></ic-text-field>

<IcTextField
maxCharacters={25}
value="Arabica"
label="What is your favourite coffee?"
required
placeholder="Please enter…"
helperText="Such as Arabica, Robusta or Liberica"
validationStatus="success"
validationText="Good choice!"
/>
<IcTextField
maxCharacters={25}
value="Arabica"
label="What is your favourite coffee?"
required
placeholder="Please enter…"
helperText="Such as Arabica, Robusta or Liberica"
validationStatus="success"
validationText="Good choice!"
validationInline
/>
<IcTextField
maxCharacters={25}
value="Arabica"
label="What is your favourite coffee?"
required
placeholder="Please enter…"
helperText="Such as Arabica, Robusta or Liberica"
validationStatus="warning"
validationText="There’s only a few left! Order now to avoid missing out."
/>
<IcTextField
maxCharacters={25}
value="Tea"
label="What is your favourite coffee?"
required
placeholder="Please enter…"
helperText="Such as Arabica, Robusta or Liberica"
validationStatus="error"
validationText="Now it has really gone to (coffee) pot"
/>

With min and max values

In this example, an error message will display when the input is either below the min value or above the max value. This only affects numeric input fields.

Interactive example

Web component

React

Show full code

<ic-text-field
label="How many coffees do you want?"
helper-text="Our coffee machines have a maximum capacity of 4 coffees at a time."
placeholder="Please enter…"
type="number"
inputmode="numeric"
min="1"
max="4"
value="6"
></ic-text-field>

<IcTextField
label="How many coffees do you want?"
helperText="Our coffee machines have a maximum capacity of 4 coffees at a time."
placeholder="Please enter…"
type="number"
inputmode="numeric"
min={1}
max={4}
value="6"
/>

Text area with resize

Interactive example

Web component

React

Show full code

<ic-text-field
rows="6"
resize="true"
label="What is your favourite coffee?"
placeholder="Please enter…"
helper-text="Such as Arabica, Robusta or Liberica"
></ic-text-field>

<IcTextField
rows={6}
resize
label="What is your favourite coffee?"
placeholder="Please enter…"
helperText="Such as Arabica, Robusta or Liberica"
/>

Full width

Interactive example

Web component

React

Show full code

<ic-text-field
label="What is your favourite coffee?"
required="true"
placeholder="Please enter…"
helper-text="Such as Arabica, Robusta or Liberica"
full-width="true"
></ic-text-field>

<IcTextField
label="What is your favourite coffee?"
required
placeholder="Please enter…"
helperText="Such as Arabica, Robusta or Liberica"
fullWidth
/>

Custom width

Interactive example

Web component

React

Show full code

<ic-text-field
style="--input-width:25.25rem"
label="What is your favourite coffee?"
required="true"
placeholder="Please enter…"
helper-text="Such as Arabica, Robusta or Liberica"
></ic-text-field>

<IcTextField
style={{"--input-width":"25.25rem"}}
label="What is your favourite coffee?"
required
placeholder="Please enter…"
helperText="Such as Arabica, Robusta or Liberica"
/>

Last reviewed 31 May 2024 .