Get startedFoundationsComponentsPatternsGuidelinesResourcesAI
This site is a work in progress as part of GovTech {build} hackathon. Content may be incomplete or subject to change.

Input

Text inputs allow your users to enter letters, numbers and symbols on a single line.

GitHubGitHub logocomponents/input
StorybookStorybook logocomponents/input
DesignUsageAccessibilityUpdates

Purpose

Collect free-form text

Text inputs are the default choice for any information that users need to type out — names, references, search terms, addresses.

Built-in validation states

Error, warning, and success states are part of the component — validation feedback integrates naturally without custom styling.

Label and helper text included

The label and helper text slots keep form questions and guidance close to their field, reducing the cognitive load on users.

Anatomy

1

Input field

2

Icon (optional)

3

Trailing icon (optional)

4

Action (optional)

Configuration

Leading icon

The text input supports optional leading and trailing icons for visual context or inline actions.

Renders a text input with a leading icon. Use a recognisable icon to hint at the expected input type — such as a search icon for a search field.

Playground

BETA

Structure

Component tokens

Component tokens are specific to each component. Use the table title as the prefix: gap-sm under sgds/input means sgds/input/gap-sm.

sgds/input
CategoryComponent tokenSemantic tokenValueGapgap-smsgds/gap/sm12pxgap-xssgds/gap/xs8pxFormform-border-radius-mdsgds/form/border-radius/md—form-color-subtlesgds/form/color/subtle—form-outline-focussgds/form/outline/focus—

Usage

When to use

  • Use input for short, direct responses such as search terms, names, or reference values.
  • Use it when users know what they need to type and the expected value is brief.

When not to use

  • Do not use input for longer responses that need multiple lines.
  • Do not rely on placeholder text in place of a clear field label.

Best practices

Keep the field purpose clear

Users should understand what to enter before they start typing.

Do not make users guess

Placeholder-only instructions disappear and make the field harder to complete accurately.

Accessibility considerations

Built-in accessibility

  • Inputs render native input controls and connect labels, hint text, and feedback to the control.
  • The component supports disabled, read-only, required, invalid, and feedback states.

Labels and content

  • Use a visible label that tells users what to enter.
  • Place format requirements in hint text before validation happens.

Focus and interaction

  • Focus should move to the input before any suffix or supporting controls.
  • Keep validation feedback close to the input it describes.

Keyboard interaction

KeyInteractionTabMoves focus from the input to the next focusable element.Shift+TabMoves focus to the previous interactive element.Text keysEnters or edits the input value.

Updates

DateVersionDescriptionLoading updates…

Roadmap

Planned itemStatusTargetFuture enhancements for inputPlannedTBD

Feedback

Have suggestions or feedback?

Share them with us on Slack → #design-system-feedback

Bug Reports

Found a bug or issue?

Report it on GitHub Issues → sgds/components/input

Singapore Government Design System

The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.