<Text>

Skip past table of contents

Search

Table of contents

Start of documentation content

The <Text> component is used for form inputs where the user enters text. Examples include names and emails.

Use of <Text>

<Text

  id="email"

  name="email"

  isRequired

  labelHtml={{

    en: 'What is your email?',

  }}

  hintHtml={{

    en: '<abbr title="For example">E.g.</abbr> user@example.com',

  }}

  rows={1}

/>

<Text>'s props

PropAboutType
autoComplete

The autoComplete (note the capital 'C') attribute allows browsers to prefill form fields (MDN autocomplete attribute).

Using this is a WCAG requirement since WCAG 2.1.

This attribute is useful for those who have problems filling in forms as it can prefill field with an answer that can be confirmed.

"email" | "tel" | "url" | "off" | "name" | "organization-title" | "street-address" | "country" | "postal-code" | "bday" | "sex" | "photo" | "one-time-code" | "address-line1" | "address-line2" | "address-line3" | "address-level2"
hideInAnswerSummary

Whether to hide any answers below this.

boolean
hintHtml

Localisable HTML: hint content

E.g.

{
  en: '<p>Welcome to my form</p>',
}
LocalisedHtml
inputResize

CSS 'resize' property (MDN resize property)

"none" | "both" | "horizontal" | "vertical"
inputType

Indicates the type of input expected, but not necessarily via the type attribute.

For example inputType="number" doesn't mean <input type="number" and instead inputMode=numeric and pattern=0-9 etc are used.

"number" | "text" | "email" | "hidden" | "search" | "tel" | "url"
isRequired

Whether users are required to fill in this form field.

This setting affects aria-required and whether a * is displayed next to the form field, etc.

boolean
labelHelpPopoutContentButtonLabel

Localisable text: Popout Content button label

LocalisedPlainText
labelHelpPopoutContentModalContentHtml

Localisable text: Popout Content modal title

LocalisedHtml
labelHelpPopoutContentModalHeadingHtml

Localisable text: Popout Content modal title

LocalisedHtml
labelHtml

Localisable HTML: label content

E.g.

{
  en: 'Email',
}
LocalisedHtml
name

The name attribute in HTML (MDN name attribute)

Name of the form control.

Submitted with the form as part of a name:value pair in the <Formally onSubmit> callback prop valuesAsFormNames.

string
placeholder

Localisable PlainText: placeholder content.

Placeholder content may cause accessibility problems as users can confuse it with their own form values. With autoComplete prefilling fields the placeholder value can be confusing.

Typically this should be left empty.

E.g.

{
  en: '',
}
LocalisedPlainText
rows

Number of lines of text content in the input.

This may affect whether an <input> or a <textarea> is used.

number
spellcheck

The spellcheck attribute allows browsers to apply a spell check (MDN spellcheck attribute).

boolean
tagsById

A list of tags for this form field.

string[]
validationErrorInvalidHtml

Localisable HTML: invalid field error content

E.g.

{
  en: 'That email is invalid',
}
LocalisedHtml
validationErrorRequiredHtml

Localisable HTML: required field error content

E.g.

{
  en: 'This email field is required',
}
LocalisedHtml
id

Component Id.

Must be unique within the form.

string
meta

Arbitrary metadata on this node.

This is useful when developing custom controls as it allows you to pass down metadata/extensions.

string
hasChildrenById

Non-editable.

Used to indicate that this component doesn't have children.

false
hasTagsById

Non-editable.

Used to indicate that this component has tags by id.

true
isFormField

Non-editable.

Used to indicate that this component is a form field.

true
isMultichoice

Non-editable.

Used to indicate that this component isn't a multichoice form field like <Select>, <Radios> or <Checkboxes>.

false
type

Non-editable.

Type of component of "Text".

"Text"