Inputs

An input field where the user can enter data. An input field can vary in many ways, depending on the type attribute.

Design System Guidelines

Email Address

Email Address with Error State

Replace the Show/Hide Error State buttons with whatever element you want to trigger the corresponding error state.

Phone Number

The placeholder underscores _ should be replaced as the user types, while the other characters ( - ) should remain, however Webflow doesn't permit this.

Phone Number with Error State

The placeholder underscores _ should be replaced as the user types, while the other characters ( - ) should remain, however Webflow doesn't permit this. Replace the Show/Hide Error State buttons with whatever element you want to trigger the corresponding error state.

Password

Password with Error State

Replace the Show/Hide Error State buttons with whatever element you want to trigger the corresponding error state.

Text Input

Text Input with Error State

Replace the Show/Hide Error State buttons with whatever element you want to trigger the corresponding error state.

Disabled Input

To disable an input, provide a unique ID to the corresponding "dds__form-control" and then use this ID in the script found within the page settings > Before </body> tag section. Note that the disabled state will be seen when published but not in preview mode.

Read Only Input

Users should still be able to highlight and copy the text within a read-only input.

Text Area

Text Area with Error State

Replace the Show/Hide Error State buttons with whatever element you want to trigger the corresponding error state.