# nord-select > Select lets users choose one option from an options menu. > Consider using select when you have 5 or more options to choose from. ## Usage This section includes guidelines for designers and developers about the usage of this component in different contexts. > **Do:** - Use to let a user choose one option from an options menu. - Use when you have more than 6 options to choose from. - Use when you don’t know how many options there will be. - Use hint text and placeholder to provide additional, non-critical instructions. > **Don't:** - Don't use a select if you have less than 6 options to choose from. Consider using [segmented control](/components/segmented-control/) or [radio components](/components/radio/) instead, if you have enough space to allow it. --- ## Hint placement Hint text is rendered above the control by default to preserve existing behavior for current consumers. Use the `hint-below` property to opt in to rendering the hint below the control and any error. This is a non-breaking rollout for teams adopting the new layout gradually. Existing integrations keep the current placement unless `hint-below` is explicitly set. --- ## Content guidelines Select labels act as a title for the select field. Labels should typically be short and in noun form: > **Do:** Company name > **Don't:** What is your company name? When writing select labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun): > **Do:** Company name > **Don't:** Company Name Do not use colons in select labels: > **Do:** Choose organization > **Don't:** Choose organization: ## Examples ### Autocomplete ```html Title ``` ### Basic ```html ``` ### Custom Button Style ```html ``` ### Custom Icon ```html ``` ### Custom Width ```html ``` ### Disabled ```html ``` ### Expanded ```html ``` ### Hidden Label ```html Label ``` ### Required ```html ``` ### Size ```html ``` ### With A Complex Hint ```html Label Hint is an accessible way to provide additional information that might help the user ``` ### With A Complex Label ```html Number of items per page ``` ### With A Form ```html
Submit
``` ### With A Hint ```html ``` ### With A Hint Below ```html Label Hint is an accessible way to provide additional information that might help the user This field is required ``` ### With A Placeholder ```html ``` ### With Error ```html Type of pet This field is required ``` ### Standalone ```html ``` ### Field ```html Country Where you live. ``` ## API Reference ### Properties - **expand** (`boolean`, default: `false`) — Controls whether the select expands to fill the width of its container. - **size** (`'s' | 'm' | 'l'`, default: `'m'`) — The size of the component. - **placeholder** (`string | undefined`) — Placeholder text to display within the control. - **label** (`string`, default: `''`) — Label for the control. Ignored when the control is wrapped in a <nord-field>, which provides the label via <nord-field-label>. - **hint** (`string | undefined`) — Optional hint text shown with the control. Ignored inside a <nord-field>, which provides it via <nord-field-description>. - **hint-below** (`boolean`, default: `false`) — Renders the hint below the control and any error instead of below the label. - **hide-label** (`boolean`, default: `false`) — Visually hide the label, but still expose it to assistive technologies. - **error** (`string | undefined`) — Optional error shown with the control. Ignored inside a <nord-field>, which provides it via <nord-field-error>. - **required** (`boolean`, default: `false`) — Determines whether the control is required or not. A required control is announced as such to assistive technology and, inside a <nord-field>, drives the required indicator on the <nord-field-label>. When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors. - **hide-required** (`boolean`, default: `false`) — Visually hide the required indicator, but still expose the required state to assistive technologies. - **autocomplete** (`AutocompleteAttribute`, default: `'off'`) — Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user. - **disabled** (`boolean`, default: `false`) — Makes the component disabled. This prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies. - **name** (`string | undefined`) — The name of the form component. - **value** (`string`, default: `''`) — The value of the form component. - **form** (`HTMLFormElement | null`) — Gets the form, if any, associated with the form element. The setter accepts a string, which is the id of the form. ### Events - **input** (`NordEvent`) — Fired as the user types into the input. - **change** (`NordEvent`) — Fired whenever the input's value is changed via user interaction. ### Slots - **(default)** — Default slot for holding