Greenhouse Design System

Text Input

Text inputs collect short-form user input. This component supports label, hint text, disabled, and error states.

Default

A standard text input with a label. Use the placeholder prop to provide an example value.

Hint

Use hint to provide additional context below the input.

Enter the scientific name if known.

Error

Use error to show a validation message below the input. The border and text turn red to draw attention to the issue.

Please enter a valid number of days.

Disabled

Add disabled to prevent interaction. Disabled inputs are visually dimmed and cannot be focused.

This field is managed automatically.

Required

Add required to mark a field as mandatory. A visual indicator is shown alongside the label.

Usage

Always provide a label for accessibility. Use hint for helper text and error for validation messages — only one will show at a time, with error taking priority.