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

On this page

• Coding and accessibility for inputs
• Examples
• Code builder

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.

In this section

• Essential attributes
• Optional attributes

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>

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 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 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 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 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 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 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.

1. Explore by choosing different code values to generate the instance you want.

2. Get the code and pull it into your environment.

3. 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.