Text field - Intelligence Community Design System

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	"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	false
Property debounce Attribute debounce	The amount of time, in milliseconds, to wait to trigger the`icChange` event after each keystroke. type: number	0
Property disabled Attribute disabled	If`true` , the disabled state will be set. type: boolean	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	false
Property helperText Attribute helper-text	The helper text that will be displayed for additional field guidance. type: string	""
Property hideCharCount Attribute hide-char-count	If`true` , the character count which is displayed when`maxCharacters` is set will be visually hidden. type: boolean	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	false
Property inputId Attribute input-id	The ID for the input. type: string	`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"	"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	0
Property maxCharactersMessage Attribute max-characters-message	The text to display as the warning message when the maximum number of characters (the`maxCharacters` prop value) is reached. type: string	`Maximum input is ${this.maxCharacters} characters`
Property maxMessage Attribute max-message	The text to display as the error message when the maximum value (the`max` prop value) has been exceeded. type: string	`Maximum value of ${this.max} exceeded`
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	0
Property minCharactersMessage Attribute min-characters-message	The text to display as the error message when the minimum number of characters (the`minCharacters` prop value) has not been met. type: string	`Minimum input is ${this.minCharacters} characters`
Property minMessage Attribute min-message	The text to display as the error message when the minimum value (the`min` prop value) has not been met. type: string	`Minimum value of ${this.min} not met`
Property name Attribute name	The name of the control, which is submitted with the form data. type: string	this.inputId
Property placeholder Attribute placeholder	The placeholder value to be displayed. type: string	""
Property readonly Attribute readonly	If`true` , the read only state will be set. type: boolean	false
Property required Attribute required	If`true` , the input will require a value. type: boolean	false
Property resize Attribute resize	If`true` , the multiline text area will be resizeable. type: boolean	false
Property rows Attribute rows	The number of rows to transform the text field into a text area with a specific height. type: number	1
Property size Attribute size	The size of the text field component. type: IcSizesNoLarge - "medium" \| "small"	"medium"
Property spellcheck Attribute spellcheck	If`true` , the value of the text field will have its spelling and grammar checked. type: boolean	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"	"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"	"text"
Property validationAriaLive Attribute validation-aria-live	The value of the`aria-live` attribute on the validation message. When set to "default", the`aria-live` value will be handled automatically, e.g. "assertive" for`validation-status="error"` . type: IcValidationAriaLive - "assertive" \| "default" \| "off" \| "polite"	"default"
Property validationInline Attribute validation-inline	If`true` , the icon in input control will be displayed - only applies when validationStatus ='success'. type: boolean	false
Property validationStatus Attribute validation-status	The validation state - e.g. 'error' \| 'warning' \| 'success'. type: IcInformationStatusOrEmpty - "" \| "error" \| "success" \| "warning"	""
Property validationText Attribute validation-text	The text to display as the validation message. type: string	""
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

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

Default: false

Property

debounce

Attribute

debounce

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

type: number

Default: 0

Property

disabled

Attribute

disabled

Iftrue , the disabled state will be set.

type: boolean

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

Default: false

Property

helperText

Attribute

helper-text

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

type: string

Default: ""

Property

hideCharCount

Attribute

hide-char-count

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

type: boolean

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

Default: false

Property

inputId

Attribute

input-id

The ID for the input.

type: string

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

Default: 0

Property

maxCharactersMessage

Attribute

max-characters-message

The text to display as the warning message when the maximum number of characters (themaxCharacters prop value) is reached.

type: string

Default:Maximum input is ${this.maxCharacters} characters

Property

maxMessage

Attribute

max-message

The text to display as the error message when the maximum value (themax prop value) has been exceeded.

type: string

Default:Maximum value of ${this.max} exceeded

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