# Components

Unstyled React components, with behavior guides and examples you can build on.

To learn how to use and style the components, see the [guides](/docs/react).

- [Accordion](/docs/react/components/accordion): Show and hide sections of content from their headings.
- [Alert Dialog](/docs/react/components/alert-dialog): Ask someone to confirm an action before you continue.
- [Autocomplete](/docs/react/components/autocomplete): Suggest text while someone types, without limiting what they can enter.
- [Avatar](/docs/react/components/avatar): Show an image with a fallback while it loads or if it fails.
- [Button](/docs/react/components/button): Run an action, show that it's working, and keep it reachable when disabled.
- [Calendar](/docs/react/components/calendar): Choose one date, several dates, or a range from a month grid.
- [Carousel](/docs/react/components/carousel): Page through slides with native scrolling, keyboard controls, and optional rotation.
- [Checkbox](/docs/react/components/checkbox): Choose one or more options, individually or as a group.
- [Collapsible](/docs/react/components/collapsible): Show and hide a panel, preserve its contents, and animate its height.
- [Color Picker](/docs/react/components/color-picker): Choose a color by dragging across an area and along sliders, typing any CSS color, or picking a preset.
- [Combobox](/docs/react/components/combobox): Search a list of options and choose one or several values.
- [Command](/docs/react/components/command): Search commands, run actions, and open pages of more choices.
- [Date Input](/docs/react/components/date-input): Type a date one part at a time, in the order your user's language writes it.
- [Date Picker](/docs/react/components/date-picker): Type a date or choose one from a calendar, with support for ranges and forms.
- [Dialog](/docs/react/components/dialog): Open a focused task over the page.
- [Drawer](/docs/react/components/drawer): A sheet you can open, drag, and resize from an edge of the screen.
- [Field](/docs/react/components/field): Connect a form control to its label, description, and validation errors.
- [File Input](/docs/react/components/file-input): Choose, drop, or paste files, validate them, and submit them with a form.
- [Hover Card](/docs/react/components/hover-card): Preview a link on hover or keyboard focus while keeping its normal navigation.
- [Image Cropper](/docs/react/components/image-cropper): Choose the part of an image to keep by moving and resizing a selection, or by panning and zooming the image under it.
- [Input](/docs/react/components/input): Enter text, add a clear button, and connect the value to your form or state.
- [Label](/docs/react/components/label): Name any control with a label, and let a press on the label reach it.
- [Listbox](/docs/react/components/listbox): Choose one or several options from an always-visible list.
- [Menu](/docs/react/components/menu): Choose actions and settings from a button or a context menu.
- [Menubar](/docs/react/components/menubar): Move between an application’s menus with one tab stop.
- [Meter](/docs/react/components/meter): Show a measurement within a known range, such as storage used or an account quota.
- [Navigation Menu](/docs/react/components/navigation-menu): Groups site links into panels that open from a row of triggers.
- [Number Input](/docs/react/components/number-input): Enter numbers, step through values, and format them for a locale.
- [OTP Input](/docs/react/components/otp-input): Enter a one-time code with support for pasting, autofill, and native form validation.
- [Pagination](/docs/react/components/pagination): Navigate pages with buttons, links, or your router.
- [Password Input](/docs/react/components/password-input): Enter a password, show or hide it, and use it in a native form.
- [Popover](/docs/react/components/popover): Edit or explore something beside its trigger.
- [Preferences](/docs/react/components/preferences): Apply user preferences to data attributes so your styles can follow them.
- [Progress](/docs/react/components/progress): Show a task’s progress, or an indeterminate state while its progress is unknown.
- [Radio](/docs/react/components/radio): Choose one option, move the selection with arrow keys, and submit it with a form.
- [Rating](/docs/react/components/rating): Pick a score from a row of stars, whole or half, with a preview as the pointer moves over them.
- [Resizable](/docs/react/components/resizable): Resize, collapse, and save panel layouts with pointer and keyboard controls.
- [Scroll Area](/docs/react/components/scroll-area): Add styled scrollbars, edge indicators, and follow-to-end behavior to native scrolling.
- [Segmented Control](/docs/react/components/segmented-control): Pick one of a few options from a row of buttons, with an indicator that slides to the choice.
- [Select](/docs/react/components/select): Choose one value or several from a popup list.
- [Separator](/docs/react/components/separator): Divide groups of content with a horizontal or vertical line.
- [Slider](/docs/react/components/slider): Adjust a number or a range with draggable thumbs and keyboard controls.
- [Switch](/docs/react/components/switch): Turn a setting on or off.
- [Tabs](/docs/react/components/tabs): Switch between related panels with one tab selected at a time.
- [Textarea](/docs/react/components/textarea): Enter multiple lines of text, grow the field as you type, and connect it to a form.
- [Time Input](/docs/react/components/time-input): Type a time one part at a time, on the clock your user's language uses.
- [Timeline](/docs/react/components/timeline): Show dated events in order, like an activity feed, a changelog or an order's progress, with arrow keys between them.
- [Toast](/docs/react/components/toast): Show notifications with actions, timed dismissal, and screen reader announcements.
- [Toggle](/docs/react/components/toggle): Keep a button pressed, or group toggles with a shared value and arrow-key navigation.
- [Token Input](/docs/react/components/token-input): Mix editable text with tokens for files, people, tags, and other references.
- [Toolbar](/docs/react/components/toolbar): Give buttons, toggles, menus and fields one tab stop with arrow-key navigation.
- [Tooltip](/docs/react/components/tooltip): Name a control or add a short hint on hover and keyboard focus.
- [Tree](/docs/react/components/tree): Browse a hierarchy of files, pages, or choices with expandable branches.
- [Trigger Menu](/docs/react/components/trigger-menu): "Opens suggestions at the caret when you type a trigger such as @, /, or #."
- [Waterfall](/docs/react/components/waterfall): Show a trace or a page's requests as bars on a shared time axis, with spans that expand to show what they started.