Inputs

Design Links

Open in Sketch Cloud

Open in Figma

Text Input

Allows the user to enter text into an input. Labels should be used in combination with text inputs to inform the user of the expected input. Optionally, the label may be visually hidden. When collecting information like emails or passwords, the respective input type should be assigned.

Text Field

Allows the user to enter a larger body of text. Unlike other disabled styles, the disabled state here displays the text in the text-primary color to ensure users with read-only access can still comfortably read the text in the Text Field.

@import 'node_modules/@hospitality-digital/design-system/css/components/text-field.css';