Components
Unstyled Web Components, with behavior guides and examples you can build on.
To learn how to use and style the components, see the guides.
AccordionShow and hide sections of content from their headings.Alert DialogAsk someone to confirm an action before you continue.AutocompleteSuggest text while someone types, without limiting what they can enter.AvatarShow an image with a fallback while it loads or if it fails.ButtonRun an action, show that it's working, and keep it reachable when disabled.CalendarChoose one date, several dates, or a range from a month grid.CarouselPage through slides with native scrolling, keyboard controls, and optional rotation.CheckboxChoose one or more options, individually or as a group.CollapsibleShow and hide a panel, preserve its contents, and animate its height.Color PickerChoose a color by dragging across an area and along sliders, typing any CSS color, or picking a preset.ComboboxSearch a list of options and choose one or several values.CommandSearch commands, run actions, and open pages of more choices.Date InputType a date one part at a time, in the order your user's language writes it.Date PickerType a date or choose one from a calendar, with support for ranges and forms.DialogOpen a focused task over the page.DrawerA sheet you can open, drag, and resize from an edge of the screen.FieldConnect a form control to its label, description, and validation errors.File InputChoose, drop, or paste files, validate them, and submit them with a form.Hover CardPreview a link on hover or keyboard focus while keeping its normal navigation.Image CropperChoose the part of an image to keep by moving and resizing a selection, or by panning and zooming the image under it.InputEnter text, add a clear button, and connect the value to your form or state.LabelName any control with a label, and let a press on the label reach it.ListboxChoose one or several options from an always-visible list.MenuChoose actions and settings from a button or a context menu.MenubarMove between an application’s menus with one tab stop.MeterShow a measurement within a known range, such as storage used or an account quota.Navigation MenuGroups site links into panels that open from a row of triggers.Number InputEnter numbers, step through values, and format them for a locale.OTP InputEnter a one-time code with support for pasting, autofill, and native form validation.PaginationNavigate pages with buttons, links, or your router.Password InputEnter a password, show or hide it, and use it in a native form.PopoverEdit or explore something beside its trigger.PreferencesApply user preferences to data attributes so your styles can follow them.ProgressShow a task’s progress, or an indeterminate state while its progress is unknown.RadioChoose one option, move the selection with arrow keys, and submit it with a form.RatingPick a score from a row of stars, whole or half, with a preview as the pointer moves over them.ResizableResize, collapse, and save panel layouts with pointer and keyboard controls.Scroll AreaAdd styled scrollbars, edge indicators, and follow-to-end behavior to native scrolling.Segmented ControlPick one of a few options from a row of buttons, with an indicator that slides to the choice.SelectChoose one value or several from a popup list.SeparatorDivide groups of content with a horizontal or vertical line.SliderAdjust a number or a range with draggable thumbs and keyboard controls.SwitchTurn a setting on or off.TabsSwitch between related panels with one tab selected at a time.TextareaEnter multiple lines of text, grow the field as you type, and connect it to a form.Time InputType a time one part at a time, on the clock your user's language uses.TimelineShow dated events in order, like an activity feed, a changelog or an order's progress, with arrow keys between them.ToastShow notifications with actions, timed dismissal, and screen reader announcements.ToggleKeep a button pressed, or group toggles with a shared value and arrow-key navigation.Token InputMix editable text with tokens for files, people, tags, and other references.ToolbarGive buttons, toggles, menus and fields one tab stop with arrow-key navigation.TooltipName a control or add a short hint on hover and keyboard focus.TreeBrowse a hierarchy of files, pages, or choices with expandable branches.Trigger MenuOpens suggestions at the caret when you type a trigger such as @, /, or #.WaterfallShow a trace or a page's requests as bars on a shared time axis, with spans that expand to show what they started.