NO SMOKE SMELL*   HANDS-FREE. TRY VELO FOR FREE TODAY! FIND OUT MORE

Form Text

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


Default

Value is read only (help message set via dialog)

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

Value is read only (help message set via dialog)

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

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

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 is required and should match format 'dd/mm/yyyy' (help message set up via dialog)

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

This should be a password (help message set up via 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

Value is read only (help message set via dialog)

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

Value is read only (help message set via dialog)

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

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

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 is required and should match format 'dd/mm/yyyy' (help message set up via dialog)

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

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

Container with background full page width and primary dark background

Value is read only (help message set via dialog)

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

Value is read only (help message set via dialog)

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

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

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 is required and should match format 'dd/mm/yyyy' (help message set up via dialog)

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

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

Container with default width and secondary light background

Value is read only (help message set via dialog)

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

Value is read only (help message set via dialog)

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

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

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 is required and should match format 'dd/mm/yyyy' (help message set up via dialog)

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

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

Container with default width and secondary dark background

Value is read only (help message set via dialog)

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

Value is read only (help message set via dialog)

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

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

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 is required and should match format 'dd/mm/yyyy' (help message set up via dialog)

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

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