Skip to content
Sign in
An image of the Stripe logo
/
Create account
Sign in
Home
Payments
Finance automation
Banking as a service
Developer tools
No-code
All products
Home
Payments
Finance automation
Home
Payments
Finance automation
Banking as a service
Developer tools
Overview
Get started
About Stripe payments
Start an integration
Payment Links
Checkout
Web Elements
    Overview
    Elements
    Address Element
    Express Checkout Element
    Payment Element
    Link Authentication Element
    Payment Method Messaging Element
    Other Guides
    Elements Appearance API
    Link purchase protection
Mobile Elements
Payment scenarios
During the payment
After the payment
Add payment methods
More payment scenarios
Faster checkout with Link
Other Stripe products
Connect
Terminal
Radar
Financial Connections
Crypto
Identity
Climate
Resources
About the APIs
Implementation guides
Regulation support
Testing
Elements
·
HomePaymentsWeb Elements

Elements Appearance API

Customize the look and feel of Elements to match the design of your site.

Stripe Elements supports visual customization, which allows you to match the design of your site with the appearance option. The layout of each Element stays consistent, but you can modify colors, fonts, borders, padding, and more.

  1. Start by picking a theme

Get up and running right away by picking the prebuilt theme that most closely resembles your website.

  1. Customize the theme using variables

Set variables like fontFamily and colorPrimary to broadly customize components appearing throughout each Element.

  1. If needed, fine-tune individual components and states using rules

For complete control, specify custom CSS properties for individual components appearing in the Element.

Note

The Elements Appearance API doesn’t support individual payment method Elements (such as CardElement). Use the Style object to customize your Element instead.

Themes

Start customizing Elements by picking from one of the following themes:

  • stripe
  • night
  • flat
const appearance = { theme: 'night' }; // Pass the appearance object to the Elements instance const elements = stripe.elements({clientSecret, appearance});

Variables

Set variables to affect the appearance of many components appearing throughout each Element.

The variables option works like CSS variables. You can specify CSS values for each variable and reference other variables with the var(--myVariable) syntax. You can even inspect the resulting DOM using the DOM explorer in your browser.

const appearance = { theme: 'stripe', variables: { colorPrimary: '#0570de', colorBackground: '#ffffff', colorText: '#30313d', colorDanger: '#df1b41', fontFamily: 'Ideal Sans, system-ui, sans-serif', spacingUnit: '2px', borderRadius: '4px', // See all possible variables below } }; // Pass the appearance object to the Elements instance const elements = stripe.elements({clientSecret, appearance});

Commonly used variables

VariableDescription
fontFamilyThe font family used throughout Elements. Elements supports custom fonts by passing the fonts option to the Elements group.
fontSizeBaseThe font size that’s set on the root of the Element. By default, other font size variables like fontSizeXs or fontSizeSm are scaled from this value using rem units.
spacingUnitThe base spacing unit that all other spacing is derived from. Increase or decrease this value to make your layout more or less spacious.
borderRadiusThe border radius used for tabs, inputs, and other components in the Element.
colorPrimaryA primary color used throughout the Element. Set this to your primary brand color.
colorBackgroundThe color used for the background of inputs, tabs, and other components in the Element.
colorTextThe default text color used in the Element.
colorDangerA color used to indicate errors or destructive actions in the Element.

Less commonly used variables

VariableDescription
fontSmoothWhat text anti-aliasing settings to use in the Element. It can be always, auto, or never.
fontVariantLigaturesThe font-variant-ligatures setting of text in the Element.
fontVariationSettingsThe font-variation-settings setting of text in the Element.
fontWeightLightThe font weight used for light text.
fontWeightNormalThe font weight used for normal text.
fontWeightMediumThe font weight used for medium text.
fontWeightBoldThe font weight used for bold text.
fontLineHeightThe line-height setting of text in the Element.
fontSizeXlThe font size of extra-large text in the Element. By default this is scaled from var(--fontSizeBase) using rem units.
fontSizeLgThe font size of large text in the Element. By default this is scaled from var(--fontSizeBase) using rem units.
fontSizeSmThe font size of small text in the Element. By default this is scaled from var(--fontSizeBase) using rem units.
fontSizeXsThe font size of extra-small text in the Element. By default this is scaled from var(--fontSizeBase) using rem units.
fontSize2XsThe font size of double-extra small text in the Element. By default this is scaled from var(--fontSizeBase) using rem units.
fontSize3XsThe font size of triple-extra small text in the Element. By default this is scaled from var(--fontSizeBase) using rem units.
logoColorA preference for which logo variations to display; either light or dark.
tabLogoColorThe logo variation to display inside .Tab components; either light or dark.
tabLogoSelectedColorThe logo variation to display inside the .Tab--selected component; either light or dark.
blockLogoColorThe logo variation to display inside .Block components; either light or dark.
colorSuccessA color used to indicate positive actions or successful results in the Element.
colorWarningA color used to indicate potentially destructive actions in the Element.
accessibleColorOnColorPrimaryThe color of text appearing on top of any var(--colorPrimary) background.
accessibleColorOnColorBackgroundThe color of text appearing on top of any var(--colorBackground) background.
accessibleColorOnColorSuccessThe color of text appearing on top of any var(--colorSuccess) background.
accessibleColorOnColorDangerThe color of text appearing on top of any var(--colorDanger) background.
accessibleColorOnColorWarningThe color of text appearing on top of any var(--colorWarning) background.
colorTextSecondaryThe color used for text of secondary importance. For example, this color is used for the label of a tab that isn’t currently selected.
colorTextPlaceholderThe color used for input placeholder text in the Element.
iconColorThe default color used for icons in the Element, such as the icon appearing in the card tab.
iconHoverColorThe color of icons when hovered.
iconCardErrorColorThe color of the card icon when it’s in an error state.
iconCardCvcColorThe color of the CVC variant of the card icon.
iconCardCvcErrorColorThe color of the CVC variant of the card icon when the CVC field has invalid input.
iconCheckmarkColorThe color of checkmarks displayed within components like .Checkbox.
iconChevronDownColorThe color of arrow icons displayed within select inputs.
iconChevronDownHoverColorThe color of arrow icons when hovered.
iconCloseColorThe color of close icons, used for indicating a dismissal or close action.
iconCloseHoverColorThe color of close icons when hovered.
iconLoadingIndicatorColorThe color of the spinner in loading indicators.
iconMenuColorThe color of menu icons used to indicate a set of additional actions.
iconMenuHoverColorThe color of menu icons when hovered.
iconMenuOpenColorThe color of menu icons when opened.
iconPasscodeDeviceColorThe color of the passcode device icon, used to indicate a message has been sent to the user’s mobile device.
iconPasscodeDeviceHoverColorThe color of the passcode device icon when hovered.
iconPasscodeDeviceNotificationColorThe color of the notification indicator displayed over the passcode device icon.
iconRedirectColorThe color of the redirect icon that appears for redirect-based payment methods.
tabIconColorThe color of icons appearing in a tab.
tabIconHoverColorThe color of icons appearing in a tab when the tab is hovered.
tabIconSelectedColorThe color of icons appearing in a tab when the tab is selected.
tabIconMoreColorThe color of the icon that appears in the trigger for the additional payment methods menu.
tabIconMoreHoverColorThe color of the icon that appears in the trigger for the additional payment methods menu when the trigger is hovered.
accordionItemSpacingThe vertical spacing between .AccordionItem components. This is only applicable when spacedAccordionItems is true.
gridColumnSpacingThe spacing between columns in the grid used for the Element layout.
gridRowSpacingThe spacing between rows in the grid used for the Element layout.
pickerItemSpacingThe spacing between .PickerItem components rendered within the .Picker component.
tabSpacingThe horizontal spacing between .Tab components.

Rules

The rules option is a map of CSS-like selectors to CSS properties, allowing granular customization of individual components. After defining your theme and variables, use rules to seamlessly integrate Elements to match the design of your site.

const appearance = { rules: { '.Tab': { border: '1px solid #E0E6EB', boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02)', }, '.Tab:hover': { color: 'var(--colorText)', }, '.Tab--selected': { borderColor: '#E0E6EB', boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02), 0 0 0 2px var(--colorPrimary)', }, '.Input--invalid': { boxShadow: '0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 2px var(--colorDanger)', }, // See all supported class names and selector syntax below } }; // Pass the appearance object to the Elements instance const elements = stripe.elements({clientSecret, appearance});

All rules

The selector for a rule can target any of the public class names in the Element, as well as the supported states, pseudo-classes, and pseudo-elements for each class. For example, the following are valid selectors:

  • .Tab, .Label, .Input
  • .Tab:focus
  • .Input--invalid, .Label--invalid
  • .Input::placeholder

The following are not valid selectors:

  • .p-SomePrivateClass, img, only public class names can be targeted
  • .Tab .TabLabel, ancestor-descendant relationships in selectors are unsupported
  • .Tab--invalid, the .Tab class does not support the --invalid state

Each class name used in a selector supports an allowlist of CSS properties, that you specify using camel case (for example, boxShadow for the box-shadow property).

The following is the complete list of supported class names and corresponding states, pseudo-classes, and pseudo-elements.

Tabs

Class nameStates Pseudo-classesPseudo-elements
.Tab--selected:hover, :focus, :active, :disabled
.TabIcon--selected:hover, :focus, :active, :disabled
.TabLabel--selected:hover, :focus, :active, :disabled

Form Inputs - Labels Above

Class nameStates Pseudo-classesPseudo-elements
.Label--empty, --invalid
.Input--empty, --invalid:hover, :focus, :disabled, :autofill::placeholder, ::selection
.Error

Form Inputs - Floating Labels

Note

Floating Labels can be enabled as an additional configuration option.

Class nameStates Pseudo-classesPseudo-elements
.Label--empty, --invalid, --floating, --resting
.Input--empty, --invalid:hover, :focus, :disabled, :autofill::placeholder, ::selection
.Error

Block

Class nameStates Pseudo-classesPseudo-elements
.Block
.BlockDivider
.BlockAction--negative:hover, :focus, :active

Code Input

Class nameStates Pseudo-classesPseudo-elements
.CodeInput:hover, :focus, :disabled

Checkbox

Class nameStates Pseudo-classesPseudo-elements
.Checkbox--checked
.CheckboxLabel--checked:hover, :focus, :focus-visible
.CheckboxInput--checked:hover, :focus, :focus-visible

Dropdown

Class nameStates Pseudo-classesPseudo-elements
.Dropdown
.DropdownItem--highlight:active

Switch

Class nameStates Pseudo-classesPseudo-elements
.Switch--active:hover
.SwitchControl:hover

Picker

Class nameStates Pseudo-classesPseudo-elements
.PickerItem--selected, --highlight, --new, --disabled:hover, :focus, :active
.PickerAction:hover, :focus, :active

User Experience Tip

Make sure your .PickerItem active state stands out amongst the other states.

DO

Use a noticeable, high-contrast primary color, weight, and/or outline to distinguish the active state your customer has already selected.

DON’T

Don’t use two equally weighted options or low-contrast colors for your .PickerItem states because it makes distinguishing which one is active more difficult.

Menu

Class nameStates Pseudo-classesPseudo-elements
.Menu
.MenuIcon--open:hover
.MenuAction--negative:hover, :focus, :active

Accordion

Class nameStates Pseudo-classesPseudo-elements
.AccordionItem--selected:hover, :focus-visible

Supported CSS properties

CSS PropertySupported classes
-moz-osx-font-smoothingAccordionItem, Action, BlockAction, Button, Checkbox, CheckboxLabel, CodeInput, DropdownItem, Error, Input, Label, Link, MenuAction, PickerAction, PickerItem, RedirectText, SecondaryLink, Tab, TabLabel, TermsLink, TermsText, Text
-webkit-font-smoothingAccordionItem, Action, BlockAction, Button, Checkbox, CheckboxLabel, CodeInput, DropdownItem, Error, Input, Label, Link, MenuAction, PickerAction, PickerItem, RedirectText, SecondaryLink, Tab, TabLabel, TermsLink, TermsText, Text
-webkit-text-fill-colorAccordionItem, Action, BlockAction, Button, Checkbox, CheckboxLabel, CodeInput, DropdownItem, Error, Input, Label, Link, MenuAction, PickerAction, PickerItem, RedirectText, SecondaryLink, Tab, TabLabel, TermsLink, TermsText, Text
backgroundColorAccordionItem, Action, Block, BlockAction, BlockDivider, Button, CheckboxInput, CodeInput, DropdownItem, Error, Input, InputDivider, MenuAction, MenuIcon, PickerAction, PickerItem, Switch, Tab
borderAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text
borderBottomAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text
borderBottomColorAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text
borderBottomLeftRadiusAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text
borderBottomRightRadiusAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text
borderBottomStyleAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text
borderBottomWidthAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text
borderColorAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text
borderLeftAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text
borderLeftColorAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text
borderLeftStyleAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text
borderLeftWidthAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text
borderRadiusAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, InputCloseIcon, Link, MenuAction, MenuIcon, PasscodeCloseIcon, PasscodeShowIcon, PickerAction, PickerItem, RedirectText, SecondaryLink, Switch, SwitchControl, Tab, TermsLink, TermsText, Text
borderRightAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text
borderRightColorAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text
borderRightStyleAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text
borderRightWidthAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text
borderStyleAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text
borderTopAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text
borderTopColorAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text
borderTopLeftRadiusAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text
borderTopRightRadiusAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text
borderTopStyleAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text
borderTopWidthAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text
borderWidthAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text
boxShadowAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, InputCloseIcon, Link, MenuAction, MenuIcon, PasscodeCloseIcon, PasscodeShowIcon, PickerAction, PickerItem, SecondaryLink, Switch, SwitchControl, Tab, TermsLink
colorAccordionItem, Action, BlockAction, Button, Checkbox, CheckboxLabel, CodeInput, DropdownItem, Error, Input, Label, Link, MenuAction, PickerAction, PickerItem, RedirectText, SecondaryLink, Tab, TabIcon, TabLabel, TermsLink, TermsText, Text
fillAction, BlockAction, Button, CodeInput, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, SwitchControl, Tab, TabIcon
fontFamilyAccordionItem, Action, BlockAction, Button, Checkbox, CheckboxLabel, CodeInput, DropdownItem, Error, Input, Label, Link, MenuAction, PickerAction, PickerItem, RedirectText, SecondaryLink, Tab, TabLabel, TermsLink, TermsText, Text
fontSizeAccordionItem, Action, BlockAction, Button, Checkbox, CheckboxLabel, CodeInput, DropdownItem, Error, Input, Label, Link, MenuAction, PickerAction, PickerItem, RedirectText, SecondaryLink, Switch, Tab, TabLabel, TermsLink, TermsText, Text
fontVariantAccordionItem, Action, BlockAction, Button, Checkbox, CheckboxLabel, CodeInput, DropdownItem, Error, Input, Label, Link, MenuAction, PickerAction, PickerItem, RedirectText, SecondaryLink, Tab, TabLabel, TermsLink, TermsText, Text
fontVariationAccordionItem, Action, BlockAction, Button, Checkbox, CheckboxLabel, CodeInput, DropdownItem, Error, Input, Label, Link, MenuAction, PickerAction, PickerItem, RedirectText, SecondaryLink, Tab, TabLabel, TermsLink, TermsText, Text
fontWeightAccordionItem, Action, BlockAction, Button, Checkbox, CheckboxLabel, CodeInput, DropdownItem, Error, Input, Label, Link, MenuAction, PickerAction, PickerItem, RedirectText, SecondaryLink, Tab, TabLabel, TermsLink, TermsText, Text
letterSpacingAccordionItem, Action, BlockAction, Button, Checkbox, CheckboxLabel, CodeInput, DropdownItem, Error, Input, Label, Link, MenuAction, PickerAction, PickerItem, RedirectText, SecondaryLink, Tab, TabLabel, TermsLink, TermsText, Text
lineHeightAccordionItem, Action, BlockAction, Button, Checkbox, CheckboxLabel, CodeInput, DropdownItem, Error, Input, Label, Link, MenuAction, PickerAction, PickerItem, RedirectText, SecondaryLink, Tab, TabLabel, TermsLink, TermsText, Text
marginAction, BlockAction, Button, CodeInput, DropdownItem, Error, Input, Label, MenuAction, PickerAction, PickerItem, Tab
marginBottomAction, BlockAction, Button, CodeInput, DropdownItem, Error, Input, Label, MenuAction, PickerAction, PickerItem, Tab
marginLeftAction, BlockAction, Button, CodeInput, DropdownItem, Error, Input, Label, MenuAction, PickerAction, PickerItem, Tab
marginRightAction, BlockAction, Button, CodeInput, DropdownItem, Error, Input, Label, MenuAction, PickerAction, PickerItem, Tab
marginTopAction, BlockAction, Button, CodeInput, DropdownItem, Error, Input, Label, MenuAction, PickerAction, PickerItem, Tab
opacityLabel
outlineAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, InputCloseIcon, Link, MenuAction, MenuIcon, PasscodeCloseIcon, PasscodeShowIcon, PickerAction, PickerItem, SecondaryLink, Switch, SwitchControl, Tab, TermsLink
outlineOffsetAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, InputCloseIcon, Link, MenuAction, MenuIcon, PasscodeCloseIcon, PasscodeShowIcon, PickerAction, PickerItem, SecondaryLink, Switch, SwitchControl, Tab, TermsLink
paddingAccordionItem, Action, Block, BlockAction, Button, CodeInput, DropdownItem, Error, Input, Label, Menu, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Tab, TabIcon, TabLabel, TermsText, Text
paddingBottomAccordionItem, Action, Block, BlockAction, Button, CodeInput, DropdownItem, Error, Input, Label, Menu, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Tab, TabIcon, TabLabel, TermsText, Text
paddingLeftAccordionItem, Action, Block, BlockAction, Button, CodeInput, DropdownItem, Error, Input, Label, Menu, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Tab, TabIcon, TabLabel, TermsText, Text
paddingRightAccordionItem, Action, Block, BlockAction, Button, CodeInput, DropdownItem, Error, Input, Label, Menu, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Tab, TabIcon, TabLabel, TermsText, Text
paddingTopAccordionItem, Action, Block, BlockAction, Button, CodeInput, DropdownItem, Error, Input, Label, Menu, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Tab, TabIcon, TabLabel, TermsText, Text
textDecorationAccordionItem, Action, BlockAction, Button, Checkbox, CheckboxLabel, CodeInput, DropdownItem, Error, Input, Label, Link, MenuAction, PickerAction, PickerItem, RedirectText, SecondaryLink, Tab, TabLabel, TermsLink, TermsText, Text
textShadowAccordionItem, Action, BlockAction, Button, Checkbox, CheckboxLabel, CodeInput, DropdownItem, Error, Input, Label, Link, MenuAction, PickerAction, PickerItem, RedirectText, SecondaryLink, Tab, TabLabel, TermsLink, TermsText, Text
textTransformAccordionItem, Action, BlockAction, Button, Checkbox, CheckboxLabel, CodeInput, DropdownItem, Error, Input, Label, Link, MenuAction, PickerAction, PickerItem, RedirectText, SecondaryLink, Tab, TabLabel, TermsLink, TermsText, Text
transitionAction, Block, BlockAction, Button, CheckboxInput, CheckboxLabel, CodeInput, Dropdown, DropdownItem, Error, Icon, Input, InputCloseIcon, Label, Link, MenuAction, MenuIcon, PasscodeCloseIcon, PasscodeShowIcon, PickerAction, PickerItem, RedirectText, SecondaryLink, Switch, SwitchControl, Tab, TabIcon, TabLabel, TermsLink, TermsText, Text

Some exceptions to the properties above are:

  • -webkit-text-fill-color isn’t compatible with pseudo-classes

Other Configuration Options

In addition to themes, variables and rules, we have provided additional appearance configuration options to style Elements.

You can customize these by adding them to the appearance object:

const appearance = { labels: 'floating', // other configurations such as `theme`, `variables` and `rules`... }

We currently support the below options:

ConfigurationDescription
labelsEnables switching between labels above form fields and floating labels within the form fields; it can be either above or floating
Was this page helpful?
Need help? Contact Support.
Watch our developer tutorials.
Check out our product changelog.
Questions? Contact Sales.
Powered by Markdoc
You can unsubscribe at any time. Read our privacy policy.
On this page
Themes
Variables
Rules
Other Configuration Options
Products Used
Elements
Stripe Shell
Test mode
Welcome to the Stripe Shell! Stripe Shell is a browser-based shell with the Stripe CLI pre-installed. Log in to your Stripe account and press Control + Backtick (`) on your keyboard to start managing your Stripe resources in test mode. - View supported Stripe commands: - Find webhook events: - Listen for webhook events: - Call Stripe APIs: stripe [api resource] [operation] (e.g., )
The Stripe Shell is best experienced on desktop.
$