Collect short text
Use text inputs for single-line values such as names, references, and search terms.
Text inputs allow your users to enter letters, numbers and symbols on a single line.
Use text inputs for single-line values such as names, references, and search terms.
Built-in states help users see errors, warnings, and successful entries.
Labels, hint text, and feedback stay close to the input they explain.
Label
Leading icon
Hint text
Prefix
Value
Password icon
Suffix
Trailing icon
Action - Icon button
Input container
Use hint text to clarify the expected value.
Default. Use when the label alone is enough.
Use the appropriate type so the browser can apply the right keyboard and validation.
Standard single-line text input.
Provide a placeholder hint for the kind of value to enter.
Empty input with no inline helper.
Use the icon slot to add a leading icon for visual context.
Default input without a leading icon.
Display a value that the user can read and copy but not edit.
Default editable input.
Disable the input to prevent it from being edited or focused.
Default interactive state.
Show error styling and a feedback message when the input is invalid.
No feedback is shown.
Prefix and suffix text add fixed context to the value users enter.
Use when the unit or symbol is part of understanding the value.
Use character count with minimum or maximum length requirements when input length matters.
Use character count to help users stay within a length limit.
Mark an input as required when the form cannot be completed without a value.
Use optional inputs only when the value is not needed.
Inputs can show asynchronous checking and successful validation states.
Use loading while checking a value against a service.
Trailing icon and action slots add contextual controls to the input.
Use a trailing icon for a passive visual cue or status icon.
Number inputs support minimum, maximum, and step constraints.
Use min, max, and step when numeric values must stay within a known range.
Each row is a colour, spacing, or size value the component uses, and the right-most column tells you where in the component you'll see it.
sgds-gap-sm12pxsgds-gap-xs8pxsgds-dimension-160—sgds-icon-size-md—sgds-form-border-radius-md—sgds-form-outline-focus—Always pair the input with a visible label so users know what to enter, even after they have typed.
Placeholder text disappears once users type. Keep the label visible above the field at all times.
Use type=email, type=number, or type=password so the browser provides the right keyboard and validation.
type=number strips leading zeros and exposes spinners that do not fit IDs. Use type=text and validate.
disabled, readonly, required, invalid, and feedback states.TabShift+TabText keysShare them with us on Slack → #ask-sgds-v3
Report it on GitHub Issues → sgds/components/input
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.