Skip to content
Create account
or
Sign in
The Stripe Docs logo
/
Ask AI
Create account
Sign in
Get started
Payments
Finance automation
Platforms and marketplaces
Money management
Developer tools
Get started
Payments
Finance automation
Get started
Payments
Finance automation
Platforms and marketplaces
Money management
Overview
Versioning
Changelog
Upgrade your API version
Upgrade your SDK version
Developer tools
SDKs
API
Testing
Workbench
Event Destinations
Workflows
Stripe CLI
Stripe Shell
Developers Dashboard
Agent toolkit
Build with LLMsStripe for Visual Studio CodeStripe health alertsFile uploads
Security and privacy
Security
Extend Stripe
Stripe Apps
    Overview
    Get started
    Create an app
    How Stripe Apps work
    Sample apps
    Build an app
    Store secrets
    API authentication methods
    Authorization flows
    Server-side logic
    Listen to events
    Handle different modes
    Enable sandbox support
    App settings page
    Build a UI
    Onboarding
    Distribute your app
    Distribution options
    Upload your app
    Versions and releases
    Test your app
    Publish your app
    Promote your app
    Add deep links
    Create install links
    Assign roles in UI extensions
    Post-install actions
    App analytics
    Embedded components for Apps
    Embed third-party Stripe Apps
    Migrating to Stripe Apps
    Migrate or build an extension
    Migrate a plugin to Stripe Apps or Stripe Connect
    Reference
    App manifest
    CLI
    Extension SDK
    Permissions
    Viewports
    Design patterns
    Components
      Accordion
      Badge
      Banner
      BarChart
      Box
      Button
      ButtonGroup
      Checkbox
      Chip
      ContextView
      DateField
      Divider
      FocusView
      FormFieldGroup
      Icon
      Img
      Inline
      LineChart
      Link
      List
      Menu
      PropertyList
      Radio
      Select
      SettingsView
      SignInView
      Sparkline
      Spinner
      Switch
      Table
      Tabs
      Tasklist
      TextArea
      TextField
      Toast
      Tooltip
Stripe Connectors
Partners
Partner ecosystem
Partner certification
HomeDeveloper toolsStripe AppsComponents

Select component for Stripe Apps

Use Select to pick from a set of options in a dropdown.

Copy page

To add the Select component to your app:

import {Select} from '@stripe/ui-extension-sdk/ui';
Loading example...
<Select name="demo-001" label="Choose a pet" onChange={(e) => { console.log(e); }} > <option value="">Choose an option</option> <option value="dogs">Dogs</option> <option value="cats">Cats</option> </Select>

Select props

PropertyType

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.

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 <form> 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<HTMLSelectElement>) => 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

PropertyType

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

State management

Use the Select component as an uncontrolled input:

Loading example...
<Select name="demo-001" label="Choose a pet" onChange={(e) => { console.log(e); }} > <option value="">Choose an option</option> <option value="dogs">Dogs</option> <option value="cats">Cats</option> </Select>

Disabled

You can disable a Select component, which prevents changes.

Loading example...
<Select name="demo-001" disabled label="Choose a pet"> <option value="">Choose an option</option> <option value="dogs">Dogs</option> <option value="cats">Cats</option> </Select>

Width

Set the width of a Select component using the available values with the css prop:

Loading example...
<Select css={{ width: 'fill', }} name="demo-001" label="Choose a pet" onChange={(e) => { console.log(e); }} > <option value="">Choose an option</option> <option value="dogs">Dogs</option> <option value="cats">Cats</option> </Select>

See also

  • Design patterns to follow
  • Style your app
  • UI testing
Was this page helpful?
YesNo
Need help? Contact Support.
Join our early access program.
Check out our changelog.
Questions? Contact Sales.
LLM? Read llms.txt.
Powered by Markdoc