# Select component for Stripe Apps Use Select to pick from a set of options in a dropdown. # v8 > This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/select?app-sdk-version=8. To add the `Select` component to your app: ```js import {Select} from '@stripe/ui-extension-sdk/ui'; ``` ### Select props | Property | Type | | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | (Required) `React.ReactNode` The contents of the component. | | `autoComplete` | (Optional) `string | undefined` Specifies one of the possible autocomplete behaviors. | | `autoFocus` | (Optional) `boolean | undefined` If `true`, React will focus the element on mount. | | `css` | (Optional) `CSS | undefined` Related types: [CSS](https://docs.stripe.com/stripe-apps/components/select.md#css). | | `defaultValue` | (Optional) `(string | string[]) | undefined` A string (or an array of strings for `multiple={true}`). Specifies the initially selected option that a user can change. | | `description` | (Optional) `string | undefined` Descriptive text that will be rendered adjacent to the control’s label. | | `disabled` | (Optional) `boolean | undefined` Sets whether or not the element should be disabled. Prevents selection. | | `error` | (Optional) `string | undefined` Error text that will be rendered below the control. | | `form` | (Optional) `string | undefined` Specifies the `id` of the `
` this input belongs to. If omitted, it’s the closest parent form. | | `hiddenElements` | (Optional) `("label" | "description" | "error")[] | undefined` Visually hides the specified elements. The hidden elements will still be present and visible to screen readers. | | `invalid` | (Optional) `boolean | undefined` Sets whether or not the element is in an invalid state. This is a display-only prop, and will not prevent form submission. | | `label` | (Optional) `React.ReactNode` Text that describes the control. Will be both visible and clickable. | | `multiple` | (Optional) `boolean | undefined` If `true`, the browser allows multiple selection. | | `name` | (Optional) `string | undefined` Specifies the name for this input that’s submitted with the form. | | `onChange` | (Optional) `((event: React.ChangeEvent) => void) | undefined` Required for controlled inputs. Fires immediately when the input’s value is changed by the user (for example, it fires on every keystroke). Behaves like the browser input event. | | `required` | (Optional) `boolean | undefined` If `true`, the value must be provided for the form to submit. | | `size` | (Optional) `("small" | "medium" | "large") | undefined` The size of the component. | | `value` | (Optional) `(string | string[]) | undefined` A string (or an array of strings for `multiple={true}`). Controls which option is selected. | ### CSS | Property | Type | | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `width` | (Optional) `(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined` The width of the component. See [Sizing](https://docs.stripe.com/stripe-apps/style.md#sizing) for details. | ## State management Use the `Select` component as an [uncontrolled input](https://docs.stripe.com/stripe-apps/how-ui-extensions-work.md#use-uncontrolled-components-for-interactions): ## Disabled You can disable a `Select` component, which prevents changes. ## Width Set the width of a `Select` component using [the available values](https://docs.stripe.com/stripe-apps/style.md#sizing) with the `css` prop: # v9 > This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/select?app-sdk-version=9. To add the `Select` component to your app: ```js import {Select} from '@stripe/ui-extension-sdk/ui'; ``` ### Select props | Property | Type | | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | (Required) `React.ReactNode` The contents of the component. | | `autoComplete` | (Optional) `string | undefined` Specifies one of the possible autocomplete behaviors. | | `autoFocus` | (Optional) `boolean | undefined` If `true`, React will focus the element on mount. | | `css` | (Optional) `CSS | undefined` Related types: [CSS](https://docs.stripe.com/stripe-apps/components/select.md#css). | | `defaultValue` | (Optional) `(string | string[]) | undefined` A string (or an array of strings for `multiple={true}`). Specifies the initially selected option that a user can change. | | `description` | (Optional) `string | undefined` Descriptive text that will be rendered adjacent to the control’s label. | | `disabled` | (Optional) `boolean | undefined` Sets whether or not the element should be disabled. Prevents selection. | | `error` | (Optional) `string | undefined` Error text that will be rendered below the control. | | `form` | (Optional) `string | undefined` Specifies the `id` of the `` this input belongs to. If omitted, it’s the closest parent form. | | `hiddenElements` | (Optional) `("label" | "description" | "error")[] | undefined` Visually hides the specified elements. The hidden elements will still be present and visible to screen readers. | | `invalid` | (Optional) `boolean | undefined` Sets whether or not the element is in an invalid state. This is a display-only prop, and will not prevent form submission. | | `label` | (Optional) `React.ReactNode` Text that describes the control. Will be both visible and clickable. | | `multiple` | (Optional) `boolean | undefined` If `true`, the browser allows multiple selection. | | `name` | (Optional) `string | undefined` Specifies the name for this input that’s submitted with the form. | | `onChange` | (Optional) `((event: React.ChangeEvent) => void) | undefined` Required for controlled inputs. Fires immediately when the input’s value is changed by the user (for example, it fires on every keystroke). Behaves like the browser input event. | | `required` | (Optional) `boolean | undefined` If `true`, the value must be provided for the form to submit. | | `size` | (Optional) `("small" | "medium" | "large") | undefined` The size of the component. | | `value` | (Optional) `(string | string[]) | undefined` A string (or an array of strings for `multiple={true}`). Controls which option is selected. | ### CSS | Property | Type | | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `width` | (Optional) `(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined` The width of the component. See [Sizing](https://docs.stripe.com/stripe-apps/style.md#sizing) for details. | ## State management Use the `Select` component as an [uncontrolled input](https://docs.stripe.com/stripe-apps/how-ui-extensions-work.md#use-uncontrolled-components-for-interactions): ## Disabled You can disable a `Select` component, which prevents changes. ## Width Set the width of a `Select` component using [the available values](https://docs.stripe.com/stripe-apps/style.md#sizing) with the `css` prop: ## See also - [Design patterns to follow](https://docs.stripe.com/stripe-apps/patterns.md) - [Style your app](https://docs.stripe.com/stripe-apps/style.md) - [UI testing](https://docs.stripe.com/stripe-apps/ui-testing.md)