GC Design SystemComponents
GC Design System Start to use Page templates overviewBasic page Components overviewAlertBreadcrumbsButtonCardCheckboxesContainerDate inputDate modifiedDetailsError messageError summaryFieldsetFile uploaderFooterGridHeaderHeadingIconInputLanguage toggleLinkNoticePaginationRadiosScreenreader-onlySearchSelectSide navigationSignatureStepperTableTextTextareaTheme and topic menuTop navigation CSS Shortcuts overview Reset styles Responsive layoutState Box sizingContainer sizingDisplayOverflowPositionVisibility FontFont familyFont sizeFont styleFont weightLine heightLink colourLink sizeLink text decorationList styleText alignText colourText overflowText transformWord break MarginPadding Align contentAlign itemsAlign selfFlexFlex directionFlex growFlex shrinkFlex wrapGapGrid columnsGrid rowsJustify contentJustify itemsJustify selfOrderPlace contentPlace itemsPlace self Background colourBorder colourBorder radiusBorder styleBorder width Icon namesIcon sizeImage CursorPointer eventsTransition Styles overviewDesign tokensColourSpacingTypography Contact usGet InvolvedFind a demo

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.
  • GitHub
  • Figma

Input component preview

On this page

Coding and accessibility for inputs

Apply required attributes

Always use the following required attributes with gcds-input:
  • name
  • label
  • input-id

Size the field to fit the response

  • For responses with a specific length, set the size attribute.
    • For example, 6 characters for a postal code or 10 characters for a phone number.
    • Size “50” = 50 characters.
  • For responses without a specific length, set the input to span around 90% of the container.
    • Use the maximum 75 characters for responses without a fixed length.
    • Use textarea for responses that need more than 75 characters.

Display numeric keyboard for mobile

  • Use inputmode=”numeric” with type=”text” for non-incremental numbers, such as account numbers, credit card numbers, or authentication codes.
  • This will open the numeric keyboard on mobile devices.
  • This does not change how the value is validated.
Add hint text
  • Use the hint attribute to add hint text.
  • Avoid adding hint text in the field where it will disappear once the field is selected or a response starts to be entered.
Hide the label
  • Set the hide-label attribute to true to visually hide the label while maintaining it for assistive technologies.
  • Avoid adding hint text when the label is hidden.
Add validation and error messages
  • Use the required attribute to activate the built-in error messages and validation for input.
  • Fields with specific input requirements will validate if the entry is invalid, even if it is not required.
  • For optional fields that need validation, like email address formats, add custom validation with a custom error message.

Examples

Explore the different ways you can configure the component. Each example shows a working implementation and ready-to-copy code.

In this section

Essential attributes

These attributes are needed for the component to function correctly.

input-id

The input-id attribute specifies the unique identifier for the input. 
<gcds-input
  input-id="input-example"
  label="Label"
  name="input-example"
></gcds-input>

label

The label attribute defines the label for the input. 
<gcds-input
  input-id="input-example"
  label="Label"
  name="input-example"
></gcds-input>

name

The name attribute identifies the input component within a form. It is used to reference the input’s value when a form is submitted. 
<gcds-input
  input-id="input-example"
  label="Label"
  name="input-example"
></gcds-input>

Optional attributes

These attributes allow you to customize or extend the component’s behaviour and presentation.

autocomplete

The autocomplete attribute controls whether the browser can suggest previously entered values for the input. 
<gcds-input
  autocomplete="given-name"
  input-id="input-example"
  label="Label"
  name="input-example"
></gcds-input>

autofocus

The autofocus attribute controls whether the input will be focused automatically when the page loads. By default, it is set to false. When set to true, the input is focused on render. 
<gcds-input
  autofocus="true"
  input-id="input-example"
  label="Label"
  name="input-example"
></gcds-input>

disabled

The disabled attribute controls whether the input is disabled or not. By default, it is set to false. 
<gcds-input
  disabled="true"
  input-id="input-example"
  label="Label"
  name="input-example"
></gcds-input>

error-message

The error-message attribute defines the error message to display for an invalid input. 
<gcds-input
  error-message="Error message"
  input-id="input-example"
  label="Label"
  name="input-example"
></gcds-input>

form

The form attribute specifies the ID of the form that the input belongs to. 
<gcds-input
  form="form-id"
  input-id="input-example"
  label="Label"
  name="input-example"
></gcds-input>

hide-label

The hide-label attribute controls whether the label is hidden or not. 
<gcds-input
  hide-label="true"
  input-id="input-example"
  label="Label"
  name="input-example"
></gcds-input>

hint

The hint attribute defines the hint text displayed under the label. 
<gcds-input
  hint="Hint / Example message."
  input-id="input-example"
  label="Label"
  name="input-example"
></gcds-input>

inputmode

The inputmode attribute sets the appearance of the virtual keyboard on mobile devices. The available options are:
  • decimal
  • email
  • none
  • numeric
  • search
  • tel
  • text
  • url
<gcds-input
  inputmode="numeric"
  input-id="input-example"
  label="Label"
  name="input-example"
></gcds-input>

max

The max attribute defines the maximum value that the input field can accept. It only applies to the number input type. 
<gcds-input
  max="100"
  type="number"
  input-id="input-example"
  label="Label"
  name="input-example"
></gcds-input>

maxlength

The maxlength attribute defines the maximum number of characters that the input field can accept. 
<gcds-input
  maxlength="10"
  input-id="input-example"
  label="Label"
  name="input-example"
></gcds-input>

min

The min attribute defines the minimum value that the input field can accept. It only applies to the number input type. 
<gcds-input
  min="22"
  type="number"
  input-id="input-example"
  label="Label"
  name="input-example"
></gcds-input>

minlength

The minlength attribute defines the minimum number of characters that the input field can accept. 
<gcds-input
  minlength="5"
  type="number"
  input-id="input-example"
  label="Label"
  name="input-example"
></gcds-input>

pattern

The pattern attribute specifies a regular expression that the input’s value must match. 
<gcds-input
  pattern="[A-Z]+"
  input-id="input-example"
  label="Label"
  name="input-example"
></gcds-input>

readonly

The readonly attribute controls whether the input field can be modified or not. When set to true, the input field cannot be modified. 
<gcds-input
  readonly="true"
  value="Readonly"
  input-id="input-example"
  label="Label"
  name="input-example"
></gcds-input>

required

The required attribute controls whether the input is required or not. When set to true, it adds “required” after the label, and activates the required validator. 
<gcds-input
  required="true"
  input-id="input-example"
  label="Label"
  name="input-example"
></gcds-input>

size

The size attribute sets the size of the input field to provide a visual indication of the expected text length to the user. 
<gcds-input
  size="6"
  input-id="input-example"
  label="Label"
  name="input-example"
></gcds-input>

step

The step attribute specifies the granularity that the value must adhere to. Use it with the number input type. 
<gcds-input
  step="10"
  type="number"
  input-id="input-example"
  label="Label"
  name="input-example"
></gcds-input>

suggestions

The suggestions attribute defines an array of suggestion options. 
<gcds-input suggestions='[{ "label": "Suggestion A"}, { "label": "Suggestion B"}, { "label": "Suggestion C"}]' input-id="input-example" label="Label" name="input-example">
</gcds-input>

type

The type attribute defines the input type. The available options are:
  • email
  • number
  • password
  • search
  • tel
  • text
  • url
<gcds-input
  type="email"
  input-id="input-example"
  label="Label"
  name="input-example"
></gcds-input>

validate-on

The validate-on attribute defines the validation event for the input. 
<gcds-input
  validate-on="other"
  required="true"
  input-id="input-example"
  label="Label"
  name="input-example"
></gcds-input>

value

The value attribute sets the initial value displayed in the input. It reflects the current value as the user edits it. 
<gcds-input
  value="Text"
  input-id="input-example"
  label="Label"
  name="input-example"
></gcds-input>
Code builder Generate an instance of the component you need by selecting its code properties.
  • Explore by choosing different code values to generate the instance you want.
  • Get the code and pull it into your environment.
  • Add any copy you need to the component (like text for a label).
Note: The code builder uses English for all code elements, which follows standard practice.
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
2026-06-10