GC Design System Components Installation Page templates Contact us Get involved Find a demo GC Design System Components

Input
<gcds-input>

Also called: text input, input field.

An input is a space to enter short-form information in response to a question or instruction.

Input component preview

Take a look at what inputs do to see if they fit the problem you're solving for. Then select the best input type for the use case you need to meet.

Problems inputs solve

Use an input to gather single-line information from a person when you're expecting a person will write:

Note: Only collect information you're authorized to handle and be sure to safeguard it to Government of Canada standards.

Related components

Text areas for multi-line freeform responses.

Date selectors when you want someone to choose a not-yet-known date, like for appointment scheduling.

Choose an input type

Set the input type based on how the input will validate the values a person enters. The input type attribute accepts the following options:

Text input uses

Email input

Password input

Tip: Communicate any password constraints in the hint text for the input so the person choosing the password knows exactly what the rules are.

Number input

To reject values that are non numerical.

Tip: When you set a constraint, like a numerical range, use hint text to relay a precise instruction.

Search input

To collect search queries.

URL input

To collect a URL, like a web address or domain name.

Help us improve

Have questions or a request? Give feedback on our contact form.

Something's wrong? Raise it through GitHub with an account. You'll have access to the team's direct responses, progress made on your issue, and issues raised by others.

Give feedback Report an issue on GitHub
2025-03-10