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

Select
<gcds-select>

Also called: dropdown, select menu. A select provides a large list of options for single selection.
  • GitHub
  • Figma

Select component preview

On this page

Coding and accessibility for select

Apply required attributes

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

Set the default value

Use the default-value attribute to set the first option in the select list. This avoids pre-selection of an option. 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 select.
  • 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.

label

The label attribute defines the label for the select. 
<gcds-select select-id="select-preview" label="Label" name="select-preview" default-value="Select option">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</gcds-select>

name

The name attribute identifies the select component within a form. It is used to reference the component after a form is submitted. 
<gcds-select select-id="select-preview" label="Label" name="select-preview" default-value="Select option">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</gcds-select>

select-id

The select-id attribute specifies the unique identifier for the select component. 
<gcds-select select-id="select-preview" label="Label" name="select-preview" default-value="Select option">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</gcds-select>

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 select. 
<gcds-select autocomplete="on" select-id="select-preview" label="Label" name="select-preview" default-value="Select option">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</gcds-select>

autofocus

The autofocus attribute controls whether the select will be focused automatically when the page loads. By default, it is set to false. When set to true, the select is focused on render. 
<gcds-select autofocus="true" select-id="select-preview" label="Label" name="select-preview" default-value="Select option">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</gcds-select>

default-value

The default-value attribute defines an optional value that gets displayed before the user selects an option. 
<gcds-select select-id="select-preview" label="Label" name="select-preview" default-value="Select option">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</gcds-select>

disabled

The disabled attribute controls whether the radios are disabled or not. By default, it is set to false. 
<gcds-select disabled="true" select-id="select-preview" label="Label" name="select-preview" default-value="Select option">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</gcds-select>

error-message

The error-message attribute defines the error message to display for invalid radios. 
<gcds-select error-message="Error message" select-id="select-preview" label="Label" name="select-preview" default-value="Select option">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</gcds-select>

form

The form attribute specifies the ID of the form that the radios belong to. 
<gcds-select form="form-id" select-id="select-preview" label="Label" name="select-preview" default-value="Select option">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</gcds-select>

hide-label

The hide-legend attribute controls whether the legend is hidden or not. 
<gcds-select hide-label="true" select-id="select-preview" label="Label" name="select-preview" default-value="Select option">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</gcds-select>

hint

The hint attribute defines the hint text displayed under the label or legend. 
<gcds-select hint="Hint / Example message." select-id="select-preview" label="Label" name="select-preview" default-value="Select option">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</gcds-select>

required

The required attribute controls whether the radio fieldset is required or not. When set to true, it adds “required” after the legend, and activates the required validator. 
<gcds-select required="true" select-id="select-preview" label="Label" name="select-preview" default-value="Select option">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</gcds-select>

validate-on

The validate-on attribute defines the validation event for the radios. 
<gcds-select validate-on="other" required="true" select-id="select-preview" label="Label" name="select-preview" default-value="Select option">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</gcds-select>

value

The value attribute contains the value of the currently selected radio button. It updates when the selection changes. 
<gcds-select value="2" select-id="select-preview" label="Label" name="select-preview" default-value="Select option">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</gcds-select>

Slots

The default slot allows you to inject custom content into the component’s primary content area, and named slots, into specific areas.

default

The default slot is for adding options and option groups. 
<gcds-select select-id="select-preview" label="Label" name="select-preview" default-value="Select option">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</gcds-select>
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