# Components

<table data-view="cards" data-full-width="false"><thead><tr><th></th><th></th><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Accordion</strong></td><td><a href="components/accordion">Documentation</a></td><td><a href="https://codesandbox.io/s/accordion-j3j7ls">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/Accordion">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Alert</strong></td><td><a href="components/alert">Documentation</a></td><td><a href="https://codesandbox.io/s/alert-xc58l9">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/Alert">GitHub</a></td><td></td><td></td></tr><tr><td><strong>App Template</strong></td><td><a href="components/apptemplate">Documentation</a></td><td><a href="https://codesandbox.io/s/app-template-n44z8g">Live Demo - Complete</a></td><td><p><a href="https://codesandbox.io/s/app-template-fixed-nyswly">Live Demo - Fixed</a></p><p><a href="https://codesandbox.io/s/app-template-monolothic-ls22r9">LiveDemo - Monolothic</a></p><p><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/AppTemplate">GitHub</a></p></td><td></td><td></td></tr><tr><td><strong>Audio Player</strong></td><td><a href="components/audioplayer">Documentation</a></td><td><a href="https://codesandbox.io/s/audio-player-cfnmrh">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/AudioPlayer">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Avatar</strong></td><td><a href="components/avatar">Documentation</a></td><td><a href="https://codesandbox.io/s/avatar-qwzvw4">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/Avatar">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Avatar Group</strong></td><td><a href="components/avatargroup">Documentation</a></td><td><a href="https://codesandbox.io/s/avatar-group-pzkm22">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/AvatarGroup">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Badge</strong></td><td><a href="components/badges">Documentation</a></td><td><a href="https://codesandbox.io/s/badge-6fjr8j">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/Badge">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Banner</strong></td><td><a href="components/banner">Documentation</a></td><td><a href="https://codesandbox.io/s/banner-c9pshc">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/Banner">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Button</strong></td><td><a href="components/button">Documentation</a></td><td><a href="https://codesandbox.io/s/button-kkd96f">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/Button">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Button Group</strong></td><td><a href="components/buttongroup">Documentation</a></td><td><a href="https://codesandbox.io/s/button-group-ws8c8t">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/ButtonGroup">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Checkbox</strong></td><td><a href="components/checkbox">Documentation</a></td><td><a href="https://codesandbox.io/s/checkbox-dymxtd">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/Checkbox">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Color Picker</strong></td><td><a href="components/colorpicker">Documentation</a></td><td><a href="https://codesandbox.io/s/color-picker-qmtqtq">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/ColorPicker">GitHub</a></td><td></td><td><a href="components/colorpicker">colorpicker</a></td></tr><tr><td><strong>Container List</strong></td><td><a href="components/container-list">Documentation</a></td><td><a href="https://codesandbox.io/p/sandbox/containerlist-9n68r6">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/ContainerList">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Credit Card</strong></td><td><a href="components/creditcard">Documentation</a></td><td><a href="https://codesandbox.io/s/credit-card-9r27yg">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/CreditCard">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Date Picker</strong></td><td><a href="components/datepicker">Documentation</a></td><td><a href="https://codesandbox.io/s/single-date-picker-l8r689">Live Demo - Single</a></td><td><a href="https://codesandbox.io/s/range-date-picker-gn48q7">Live Demo - Range</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/DatePicker">GitHub</a></td><td></td></tr><tr><td><strong>Drawer</strong></td><td><a href="components/drawer">Documentation</a></td><td><a href="https://codesandbox.io/s/drawer-zkg57c">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/Drawer">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Dropdown</strong></td><td><a href="components/dropdown">Documentation</a></td><td><a href="https://codesandbox.io/s/dropdown-rvpc7k">Live Demo</a></td><td><p><a href="https://codesandbox.io/s/dropdown-search-implementation-mv9c2x?file=/src/App.tsx">Live Demo - Search</a></p><p><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/Dropdown">GitHub</a></p></td><td></td><td></td></tr><tr><td><strong>Empty Message</strong></td><td><a href="components/emptymessage">Documentation</a></td><td><a href="https://codesandbox.io/s/empty-message-ytlfvk">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/EmptyMessage">GitHub</a></td><td></td><td></td></tr><tr><td><strong>File upload Input</strong></td><td><a href="components/fileuploadinput">Documentation</a></td><td><a href="https://codesandbox.io/s/file-upload-input-2xvvh9">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/FileUploadInput">GitHub</a></td><td></td><td></td></tr><tr><td><strong>File Upload Region</strong></td><td><a href="components/fileuploadregion">Documentation</a></td><td><a href="https://codesandbox.io/s/file-upload-region-c66m79">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/FileUploadRegion">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Help Text</strong></td><td><a href="https://app.gitbook.com/o/-M_7-lSPEt2IeTSqnKOP/s/3Lcw1cy2vsA9bEz125dK/~/changes/60/sds-components/components/helptext">Documentation</a></td><td><a href="https://codesandbox.io/s/help-text-fdv5w9">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/HelpText">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Inline Notification</strong></td><td><a href="components/inlinenotification">Documentation</a></td><td><a href="https://codesandbox.io/s/inline-notification-f8kt79">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/InlineNotification">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Label</strong></td><td><a href="components/label">Documentation</a></td><td><a href="https://codesandbox.io/s/label-fm2v7m">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/Label">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Link</strong></td><td><a href="components/links">Documentation</a></td><td><a href="https://codesandbox.io/s/link-6lc3rx">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/Link">GitHub</a></td><td></td><td></td></tr><tr><td><strong>List</strong></td><td><a href="components/list">Documentation</a></td><td><p><a href="https://codesandbox.io/p/sandbox/list-lqgyxl">Live Demo</a></p><p><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/List">Github</a></p></td><td></td><td></td><td></td></tr><tr><td><strong>Loader</strong></td><td><a href="components/loader">Documentation</a></td><td><a href="https://codesandbox.io/s/loader-38sz7c">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/Loader">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Menu</strong></td><td><a href="components/menu">Documentation</a></td><td><a href="https://codesandbox.io/s/menu-qx9v25">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/Menu">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Meter</strong></td><td><a href="components/meter">Documentation</a></td><td><a href="https://codesandbox.io/s/meter-qrtflv">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/Meter">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Mini Wizard</strong></td><td><a href="components/miniwizard">Documentation</a></td><td><a href="https://codesandbox.io/s/mini-wizard-h8svz3">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/MiniWizard">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Modal</strong></td><td><a href="components/modal">Documentation</a></td><td><a href="https://codesandbox.io/s/modal-v8ddr6">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/Modal">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Multi Select</strong></td><td><a href="https://app.gitbook.com/o/-M_7-lSPEt2IeTSqnKOP/s/3Lcw1cy2vsA9bEz125dK/~/changes/60/sds-components/components/multiselect">Documentation</a></td><td><a href="https://codesandbox.io/s/multi-select-4s4r7x">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/MultiSelect">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Number Input</strong></td><td><a href="components/numberinput">Documentation</a></td><td><a href="https://codesandbox.io/s/number-input-2x99k7">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/NumberInput">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Pagination</strong></td><td><a href="https://app.gitbook.com/o/-M_7-lSPEt2IeTSqnKOP/s/3Lcw1cy2vsA9bEz125dK/~/changes/95/sds-components/components/pagination">Documentation</a></td><td><a href="https://codesandbox.io/s/pagination-wp5tjf">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/Pagination">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Password</strong></td><td><a href="components/password">Documentation</a></td><td><a href="https://codesandbox.io/s/password-gp4tz6">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/Password">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Popover Menu</strong></td><td><a href="components/popovermenu">Documentation</a></td><td><a href="https://codesandbox.io/s/popover-menu-rq6hcz">Live Demo</a></td><td><a href="components/popovermenu">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Radio</strong></td><td><a href="components/radio">Documentation</a></td><td><a href="https://codesandbox.io/s/radio-2cqky6">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/Radio">GitHub</a>   </td><td></td><td></td></tr><tr><td><strong>Section Heading</strong></td><td><a href="components/section-heading">Documentation</a></td><td><a href="https://codesandbox.io/s/section-header-545f9r">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/SectionHeading">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Selection List</strong></td><td><a href="components/selectionlist">Documentation</a></td><td><a href="https://codesandbox.io/s/selection-list-layouts-p6jtyr">Live Demo - Layouts</a></td><td><a href="https://codesandbox.io/s/selectionlist-controlled-uncontrolled-approach-h9pg96">Live Demo - Approaches</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/SelectionList">GitHub</a></td><td></td></tr><tr><td>Skeleton</td><td><a href="components/skeleton">Documentation</a></td><td><a href="https://codesandbox.io/s/skeleton-4cfydy">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/Skeleton">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Slider</strong></td><td><a href="components/slider">Documentation</a></td><td><a href="https://codesandbox.io/s/slider-lszrjp">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/Slider">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Switch</strong></td><td><a href="components/switch">Documentation</a></td><td><a href="https://codesandbox.io/s/switch-f67xmr">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/Switch">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Tab Group</strong></td><td><a href="components/tabgroup">Documentation</a></td><td><a href="https://codesandbox.io/s/tab-group-c4vwv6">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/TabGroup">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Table</strong></td><td><a href="components/table">Documentation</a></td><td><a href="https://codesandbox.io/s/table-styles-dgv4fz">Live Demo - Styles</a></td><td><a href="https://codesandbox.io/s/table-sorting-elements-pgllqs">Live Demo - Sorting Elements</a></td><td><a href="https://codesandbox.io/s/table-selectable-rows-and-fixed-columns-x6xk2m">Live Demo - Fixed Columns and Selectable Rows</a><br><a href="https://codesandbox.io/s/table-hiding-columns-gcwpwj">Live Demo - Showing/Hiding Columns</a><br><a href="https://codesandbox.io/s/table-sorting-elements-forked-nntxtm">Live Demo - Stacked Content</a><br><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/Table">GitHub</a></td><td></td></tr><tr><td><strong>Tag</strong></td><td><a href="components/tag">Documentation</a></td><td><a href="https://codesandbox.io/s/tag-2nd2ns">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/Tag">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Telicon</strong></td><td><a href="components/telicon">Documentation</a></td><td><a href="https://codesandbox.io/s/telicon-p3pvnz">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/Telicon">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Text</strong></td><td><a href="components/links-1">Documentation</a></td><td><a href="https://codesandbox.io/s/text-9m2mww">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/Text">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Textarea</strong></td><td><a href="components/textarea">Documentation</a></td><td><a href="https://codesandbox.io/s/textarea-j5lm54">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/Textarea">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Text Input</strong></td><td><a href="components/textinput">Documentation</a></td><td><a href="https://codesandbox.io/s/text-input-skzkz2">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/TextInput">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Toast</strong></td><td><a href="components/toast">Documentation</a></td><td><a href="https://codesandbox.io/s/toast-sylwx5">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/Toast">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Tooltip</strong></td><td><a href="components/tooltip">Documentation</a></td><td><a href="https://codesandbox.io/s/tooltip-4k66zw">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/Tooltip">GitHub</a></td><td></td><td></td></tr><tr><td><strong>Wizard</strong></td><td><a href="components/wizard">Documentation</a></td><td><a href="https://codesandbox.io/s/wizard-8sr2kh">Live Demo</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/Wizard">GitHub</a></td><td></td><td></td></tr><tr><td>Wysiwyg</td><td><a href="components/wysiwyg">Documentation</a></td><td><a href="https://github.com/2600hz/sds-react-components/tree/master/src/components/Wysiwyg">GitHub</a></td><td></td><td></td><td></td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://2600hz.gitbook.io/sds/sds-3.0/sds-components/components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
