Skip to main content

Polaris web components

Forms

CheckboxCheckbox

Checkbox

Give users a clear way to make selections, such as agreeing to terms or choosing multiple items from a list.

ChoiceListChoiceList

ChoiceList

Present multiple options to users, allowing either single selections with radio buttons or multiple selections with checkboxes.

DatePickerDatePicker

DatePicker

Allow users to select a specific date or date range.

EmailFieldEmailField

EmailField

Let users enter email addresses with built-in validation and optimized keyboard settings.

FormForm

Form

Wraps one or more form controls and enables implicit submission, letting users submit the form from any input by pressing “Enter.” Unlike the HTML form element, this component doesn’t automatically submit data via HTTP. You must register a submit event to handle form submission in JavaScript.

MoneyFieldMoneyField

MoneyField

Collect monetary values from users with built-in currency formatting and validation.

NumberFieldNumberField

NumberField

Collect numerical values from users with optimized keyboard settings and built-in validation.

PasswordFieldPasswordField

PasswordField

Securely collect sensitive information from users.

SearchFieldSearchField

SearchField

Let users enter search terms or find specific items using a single-line input field.

SelectSelect

Select

Allow users to pick one option from a menu. Ideal when presenting four or more choices to keep interfaces uncluttered.

SwitchSwitch

Switch

Give users a clear way to toggle options on or off.

TextAreaTextArea

TextArea

Collect longer text content from users with a multi-line input that expands automatically.

TextFieldTextField

TextField

Lets users enter or edit text within a single-line input. Use to collect short, free-form information from users.

URLFieldURLField

URLField

Collect URLs from users with built-in formatting and validation.

Structure

BoxBox

Box

A generic container that provides a flexible alternative for custom designs not achievable with existing components. Use it to apply styling such as backgrounds, padding, or borders, or to nest and group other components. The contents of Box always maintain their natural size, making it especially useful within layout components that would otherwise stretch their children.

DividerDivider

Divider

Create clear visual separation between elements in your user interface.

GridGrid

Grid

Use s-grid to organize your content in a matrix of rows and columns and make responsive layouts for pages. Grid follows the same pattern as the CSS grid layout.

OrderedListOrderedList

OrderedList

Displays a numbered list of related items in a specific sequence. Use to present step-by-step instructions, ranked items, or procedures where order matters.

QueryContainerQueryContainer

QueryContainer

Establishes a query container for responsive design. Use s-query-container to define an element as a containment context, enabling child components or styles to adapt based on the container’s size.

SectionSection

Section

Groups related content into clearly-defined thematic areas. Sections have contextual styling that automatically adapts based on nesting depth. They also adjust heading levels to maintain a meaningful and accessible page structure.

StackStack

Stack

Organizes elements horizontally or vertically along the block or inline axis. Use to structure layouts, group related components, or control spacing between elements.

TableTable

Table

Display data clearly in rows and columns, helping users view, analyze, and compare information. Automatically renders as a list on small screens and a table on large ones.

UnorderedListUnorderedList

UnorderedList

Displays a bulleted list of related items. Use to present collections of items or options where the sequence isn’t critical.