Form Text

This page contains examples of the Form Text component, with different configuration options and style variations.

Default

Additional Information

Text sample: read-only

Value is read only (help message set via dialog)

Text field is required

Text sample: required field *

Default value is set via dialog (help message set via dialog)

Text field is required (required message from dialog)

Textarea: read-only

Value is read only (help message set via dialog)

text area value set up in dialog, cannot be changed as the textarea is set as "read-only"

Please fill in this field before submitting

Textarea: required field * Please fill in this field before submitting (required message from dialog)

Email: required and validation * Fill in the email before submitting the form (required message from dialog)

Email: read-only and validation

Read-only email value configured via dialog (help message set up via dialog)

Fill in the email before submitting the form

Phone Number: required and validation * Fill in the phone number before submitting the form

Phone Number: read-only and validation

Input of type phone should only allow numbers: constraint message should be shown before submitting the form (help message set up via dialog)

Fill in the phone number before submitting the form

Date: read-only and validation

Date format should match 'dd/mm/yyyy' otherwise the form should not be submitted and constraint message should be shown (help message set up via dialog)

Date: required and validation *

Date is required and should match format 'dd/mm/yyyy' (help message set up via dialog)

Date is required, fill in before submitting the form

Number: required and validation *

Number: read-only and validation

Fill in with numeric input (help message set up via dialog)

Password: required and validation * Password field is required to be filled (required message set up via dialog)

Password: read-only and validation

This should be a password (help message set up via dialog)

Password field is required to be filled (required message from dialog)

Container and background styles

When the Form Text component is placed inside a container, its styles are adapted to the background colour of the container.

Container with full page width and primary light background

Additional Information

Text sample: read-only

Value is read only (help message set via dialog)

Text field is required

Text sample: required field *

Default value is set via dialog (help message set via dialog)

Text field is required (required message from dialog)

Textarea: read-only

Value is read only (help message set via dialog)

text area value set up in dialog, cannot be changed as the textarea is set as "read-only"

Please fill in this field before submitting

Textarea: required field * Please fill in this field before submitting (required message from dialog)

Email: required and validation * Fill in the email before submitting the form (required message from dialog)

Email: read-only and validation

Read-only email value configured via dialog (help message set up via dialog)

Fill in the email before submitting the form

Phone Number: required and validation * Fill in the phone number before submitting the form

Phone Number: read-only and validation

Input of type phone should only allow numbers: constraint message should be shown before submitting the form (help message set up via dialog)

Fill in the phone number before submitting the form

Date: read-only and validation

Date format should match 'dd/mm/yyyy' otherwise the form should not be submitted and constraint message should be shown (help message set up via dialog)

Date: required and validation *

Date is required and should match format 'dd/mm/yyyy' (help message set up via dialog)

Date is required, fill in before submitting the form

Number: required and validation *

Number: read-only and validation

Fill in with numeric input (help message set up via dialog)

Password: required and validation * Password field is required to be filled (required message set up via dialog)

Password: read-only and validation

This should be a password (help message set up via dialog)

Password field is required to be filled (required message from dialog)

Container with background full page width and primary dark background

Additional Information

Text sample: read-only

Value is read only (help message set via dialog)

Text field is required

Text sample: required field *

Default value is set via dialog (help message set via dialog)

Text field is required (required message from dialog)

Textarea: read-only

Value is read only (help message set via dialog)

text area value set up in dialog, cannot be changed as the textarea is set as "read-only"

Please fill in this field before submitting

Textarea: required field * Please fill in this field before submitting (required message from dialog)

Email: required and validation * Fill in the email before submitting the form (required message from dialog)

Email: read-only and validation

Read-only email value configured via dialog (help message set up via dialog)

Fill in the email before submitting the form

Phone Number: required and validation * Fill in the phone number before submitting the form

Phone Number: read-only and validation

Input of type phone should only allow numbers: constraint message should be shown before submitting the form (help message set up via dialog)

Fill in the phone number before submitting the form

Date: read-only and validation

Date format should match 'dd/mm/yyyy' otherwise the form should not be submitted and constraint message should be shown (help message set up via dialog)

Date: required and validation *

Date is required and should match format 'dd/mm/yyyy' (help message set up via dialog)

Date is required, fill in before submitting the form

Number: required and validation *

Number: read-only and validation

Fill in with numeric input (help message set up via dialog)

Password: required and validation * Password field is required to be filled (required message set up via dialog)

Password: read-only and validation

This should be a password (help message set up via dialog)

Password field is required to be filled (required message from dialog)

Container with default width and secondary light background

Additional Information

Text sample: read-only

Value is read only (help message set via dialog)

Text field is required

Text sample: required field *

Default value is set via dialog (help message set via dialog)

Text field is required (required message from dialog)

Textarea: read-only

Value is read only (help message set via dialog)

text area value set up in dialog, cannot be changed as the textarea is set as "read-only"

Please fill in this field before submitting

Textarea: required field * Please fill in this field before submitting (required message from dialog)

Email: required and validation * Fill in the email before submitting the form (required message from dialog)

Email: read-only and validation

Read-only email value configured via dialog (help message set up via dialog)

Fill in the email before submitting the form

Phone Number: required and validation * Fill in the phone number before submitting the form

Phone Number: read-only and validation

Input of type phone should only allow numbers: constraint message should be shown before submitting the form (help message set up via dialog)

Fill in the phone number before submitting the form

Date: read-only and validation

Date format should match 'dd/mm/yyyy' otherwise the form should not be submitted and constraint message should be shown (help message set up via dialog)

Date: required and validation *

Date is required and should match format 'dd/mm/yyyy' (help message set up via dialog)

Date is required, fill in before submitting the form

Number: required and validation *

Number: read-only and validation

Fill in with numeric input (help message set up via dialog)

Password: required and validation * Password field is required to be filled (required message set up via dialog)

Password: read-only and validation

This should be a password (help message set up via dialog)

Password field is required to be filled (required message from dialog)

Container with default width and secondary dark background

Additional Information

Text sample: read-only

Value is read only (help message set via dialog)

Text field is required

Text sample: required field *

Default value is set via dialog (help message set via dialog)

Text field is required (required message from dialog)

Textarea: read-only

Value is read only (help message set via dialog)

text area value set up in dialog, cannot be changed as the textarea is set as "read-only"

Please fill in this field before submitting

Textarea: required field * Please fill in this field before submitting (required message from dialog)

Email: required and validation * Fill in the email before submitting the form (required message from dialog)

Email: read-only and validation

Read-only email value configured via dialog (help message set up via dialog)

Fill in the email before submitting the form

Phone Number: required and validation * Fill in the phone number before submitting the form

Phone Number: read-only and validation

Input of type phone should only allow numbers: constraint message should be shown before submitting the form (help message set up via dialog)

Fill in the phone number before submitting the form

Date: read-only and validation

Date format should match 'dd/mm/yyyy' otherwise the form should not be submitted and constraint message should be shown (help message set up via dialog)

Date: required and validation *

Date is required and should match format 'dd/mm/yyyy' (help message set up via dialog)

Date is required, fill in before submitting the form

Number: required and validation *

Number: read-only and validation

Fill in with numeric input (help message set up via dialog)

Password: required and validation * Password field is required to be filled (required message set up via dialog)

Password: read-only and validation

This should be a password (help message set up via dialog)

Password field is required to be filled (required message from dialog)