Zendesk Garden React Components

https://github.com/zendeskgarden/react-components
Admin
:seedling: garden React components
Tokens:26,146
Snippets:406
Trust Score:7.2
License:Apache-2.0
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install Tooltip Components

Source: https://context7.com/zendeskgarden/react-components/llms.txt

Install the necessary packages for tooltip components.

```bash
npm install @zendeskgarden/react-tooltips @zendeskgarden/react-theming styled-components
```

--------------------------------

### Install Tables and Theming Packages

Source: https://context7.com/zendeskgarden/react-components/llms.txt

Install the necessary packages for tables, theming, and styled-components.

```bash
npm install @zendeskgarden/react-tables @zendeskgarden/react-theming styled-components
```

--------------------------------

### Install @zendeskgarden/react-grid

Source: https://context7.com/zendeskgarden/react-components/llms.txt

Install the grid package and its dependencies.

```bash
npm install @zendeskgarden/react-grid @zendeskgarden/react-theming styled-components
```

--------------------------------

### Install @zendeskgarden/react-theming

Source: https://context7.com/zendeskgarden/react-components/llms.txt

Install the theming package and its peer dependency, styled-components.

```bash
npm install @zendeskgarden/react-theming styled-components
```

--------------------------------

### Install Pagination Components

Source: https://context7.com/zendeskgarden/react-components/llms.txt

Install the necessary packages for pagination components.

```bash
npm install @zendeskgarden/react-pagination @zendeskgarden/react-theming styled-components
```

--------------------------------

### Install Notifications and Theming Packages

Source: https://context7.com/zendeskgarden/react-components/llms.txt

Install the necessary packages for notifications, theming, and styled-components.

```bash
npm install @zendeskgarden/react-notifications @zendeskgarden/react-theming styled-components
```

--------------------------------

### Install @zendeskgarden/react-tags

Source: https://context7.com/zendeskgarden/react-components/llms.txt

Install the tags package and its dependencies.

```bash
npm install @zendeskgarden/react-tags @zendeskgarden/react-theming styled-components
```

--------------------------------

### Install Tabs, Theming, and Styled Components

Source: https://context7.com/zendeskgarden/react-components/llms.txt

Install the necessary packages for using the Tabs component.

```bash
npm install @zendeskgarden/react-tabs @zendeskgarden/react-theming styled-components
```

--------------------------------

### Install Modals Package

Source: https://context7.com/zendeskgarden/react-components/llms.txt

Install the necessary packages for modals, theming, and styled-components.

```bash
npm install @zendeskgarden/react-modals @zendeskgarden/react-theming styled-components
```

--------------------------------

### Install @zendeskgarden/react-forms

Source: https://context7.com/zendeskgarden/react-components/llms.txt

Install the necessary packages for using the forms components.

```bash
npm install @zendeskgarden/react-forms @zendeskgarden/react-theming styled-components
```

--------------------------------

### Install Dropdowns Package

Source: https://context7.com/zendeskgarden/react-components/llms.txt

Install the dropdowns package along with theming and styled-components dependencies.

```bash
npm install @zendeskgarden/react-dropdowns @zendeskgarden/react-theming styled-components
```

--------------------------------

### Install Typography and Theming Packages

Source: https://context7.com/zendeskgarden/react-components/llms.txt

Install the necessary packages for typography and theming using npm.

```bash
npm install @zendeskgarden/react-typography @zendeskgarden/react-theming styled-components
```

--------------------------------

### Install @zendeskgarden/react-buttons

Source: https://context7.com/zendeskgarden/react-components/llms.txt

Install the buttons package along with its peer dependencies.

```bash
npm install @zendeskgarden/react-buttons @zendeskgarden/react-theming styled-components
```

--------------------------------

### Install Accordions, Theming, and Styled Components

Source: https://context7.com/zendeskgarden/react-components/llms.txt

Install the necessary packages for using Accordion, Stepper, and Timeline components.

```bash
npm install @zendeskgarden/react-accordions @zendeskgarden/react-theming styled-components
```

--------------------------------

### Install Avatar Components

Source: https://context7.com/zendeskgarden/react-components/llms.txt

Install the necessary packages for avatar and status indicator components.

```bash
npm install @zendeskgarden/react-avatars @zendeskgarden/react-theming styled-components
```

--------------------------------

### React Overlay Examples: Modal, Drawer, TooltipDialog

Source: https://context7.com/zendeskgarden/react-components/llms.txt

Demonstrates the usage of Modal, Drawer, and TooltipDialog components with their respective sub-components. Ensure ThemeProvider is used for theming.

```jsx
import React, { useState, useRef } from 'react';
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Button } from '@zendeskgarden/react-buttons';
import { Modal, Drawer, TooltipDialog } from '@zendeskgarden/react-modals';

const OverlayExamples = () => {
  const [isModalOpen, setModalOpen] = useState(false);
  const [isDrawerOpen, setDrawerOpen] = useState(false);
  const [isTooltipOpen, setTooltipOpen] = useState(false);
  const tooltipRef = useRef(null);

  return (
    <ThemeProvider>
      {/* Modal dialog */}
      <Button isPrimary onClick={() => setModalOpen(true)}>Open Modal</Button>
      {isModalOpen && (
        <Modal onClose={() => setModalOpen(false)}>
          <Modal.Header tag="h2">Confirm Action</Modal.Header>
          <Modal.Body>Are you sure you want to delete this ticket?</Modal.Body>
          <Modal.Footer>
            <Modal.FooterItem>
              <Button isBasic onClick={() => setModalOpen(false)}>Cancel</Button>
            </Modal.FooterItem>
            <Modal.FooterItem>
              <Button isPrimary isDanger onClick={() => setModalOpen(false)}>
                Delete
              </Button>
            </Modal.FooterItem>
          </Modal.Footer>
          <Modal.Close aria-label="Close modal" />
        </Modal>
      )}

      {/* Drawer side panel */}
      <Button onClick={() => setDrawerOpen(true)}>Open Drawer</Button>
      <Drawer isOpen={isDrawerOpen} onClose={() => setDrawerOpen(false)}>
        <Drawer.Header>Ticket Details</Drawer.Header>
        <Drawer.Body>Detailed content goes here.</Drawer.Body>
        <Drawer.Footer>
          <Drawer.FooterItem>
            <Button isPrimary onClick={() => setDrawerOpen(false)}>Save</Button>
          </Drawer.FooterItem>
        </Drawer.Footer>
        <Drawer.Close aria-label="Close drawer" />
      </Drawer>

      {/* Anchored tooltip dialog */}
      <Button ref={tooltipRef} onClick={() => setTooltipOpen(!isTooltipOpen)}>
        More Info
      </Button>
      <TooltipDialog
        referenceElement={isTooltipOpen ? tooltipRef.current : undefined}
        onClose={() => setTooltipOpen(false)}
        placement="bottom"
      >
        <TooltipDialog.Title>Quick Guide</TooltipDialog.Title>
        <TooltipDialog.Body>Click elsewhere to dismiss this dialog.</TooltipDialog.Body>
        <TooltipDialog.Footer>
          <TooltipDialog.FooterItem>
            <Button isPrimary isBasic onClick={() => setTooltipOpen(false)}>Got it</Button>
          </TooltipDialog.FooterItem>
        </TooltipDialog.Footer>
        <TooltipDialog.Close aria-label="Close" />
      </TooltipDialog>
    </ThemeProvider>
  );
};

```

--------------------------------

### Install Colorpickers Package

Source: https://context7.com/zendeskgarden/react-components/llms.txt

Install the colorpickers package along with theming and styled-components dependencies.

```bash
npm install @zendeskgarden/react-colorpickers @zendeskgarden/react-theming styled-components
```

--------------------------------

### Install Breadcrumbs and Theming Packages

Source: https://context7.com/zendeskgarden/react-components/llms.txt

Install the necessary packages for breadcrumbs and theming using npm.

```bash
npm install @zendeskgarden/react-breadcrumbs @zendeskgarden/react-theming styled-components
```

--------------------------------

### Color Picker Components Example

Source: https://context7.com/zendeskgarden/react-components/llms.txt

Demonstrates the usage of ColorPicker, ColorPickerDialog, ColorSwatch, and ColorSwatchDialog components for color selection.

```jsx
import React, { useState } from 'react';
import { ThemeProvider } from '@zendeskgarden/react-theming';
import {
  ColorPicker,
  ColorPickerDialog,
  ColorSwatch,
  ColorSwatchDialog
} from '@zendeskgarden/react-colorpickers';

const palette = [
  [
    { label: 'Green 800', value: '#0b3b29' },
    { label: 'Green 700', value: '#186146' },
    { label: 'Green 600', value: '#038153' }
  ],
  [
    { label: 'Blue 800', value: '#0f3554' },
    { label: 'Blue 700', value: '#1f73b7' },
    { label: 'Blue 600', value: '#3091ec' }
  ]
];

const ColorExamples = () => {
  const [color, setColor] = useState('#17494D');

  return (
    <ThemeProvider>
      {/* Inline full color picker */}
      <ColorPicker color={color} onChange={({ hex }) => setColor(hex)} />

      {/* Popover color picker triggered by a button */}
      <ColorPickerDialog
        color={color}
        onChange={({ hex }) => setColor(hex)}
        buttonProps={{ 'aria-label': 'Pick brand color' }}
      />

      {/* Discrete palette swatch */}
      <ColorSwatch
        colors={palette}
        name="brand-palette"
        selectedValue={color}
        onChange={({ value }) => setColor(value)}
      />

      {/* Palette swatch in a popover dialog */}
      <ColorSwatchDialog
        colors={palette}
        name="palette-dialog"
        selectedValue={color}
        onChange={({ value }) => setColor(value)}
        buttonProps={{ 'aria-label': 'Select from palette' }}
      />
    </ThemeProvider>
  );
};

```

--------------------------------

### Install Loaders and Theming Packages

Source: https://context7.com/zendeskgarden/react-components/llms.txt

Install the necessary packages for using loaders and theming in your React application.

```bash
npm install @zendeskgarden/react-loaders @zendeskgarden/react-theming styled-components
```

--------------------------------

### Story Args and ArgTypes Example

Source: https://github.com/zendeskgarden/react-components/blob/main/docs/demo.md

This example shows how to define story arguments and argument types. It illustrates setting a boolean argument and then renaming it using `argTypes` for better categorization in the Storybook UI.

```js
args={{
  hasHint: true
}}
argTypes={{
  hasHint: { name: Hint, table: { category: 'Story' } }
}}
```

--------------------------------

### Install Datepickers Package

Source: https://context7.com/zendeskgarden/react-components/llms.txt

Install the datepickers package along with theming, styled-components, and date-fns dependencies.

```bash
npm install @zendeskgarden/react-datepickers @zendeskgarden/react-theming styled-components date-fns
```

--------------------------------

### Install Draggable and Theming Packages

Source: https://context7.com/zendeskgarden/react-components/llms.txt

Install the necessary packages for using draggable components and theming in your React application.

```bash
npm install @zendeskgarden/react-draggable @zendeskgarden/react-theming styled-components
```

--------------------------------

### React Notification Components Example

Source: https://context7.com/zendeskgarden/react-components/llms.txt

Demonstrates the usage of Alert, Notification, Well, GlobalAlert, and ToastProvider with custom toast triggers.

```jsx
import React from 'react';
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Button } from '@zendeskgarden/react-buttons';
import {
  Alert,
  Notification,
  Well,
  GlobalAlert,
  ToastProvider,
  useToast
} from '@zendeskgarden/react-notifications';

// Toast trigger component (must be inside ToastProvider)
const ToastTrigger = () => {
  const { addToast } = useToast();

  const showToast = (type) =>
    addToast(
      ({ close }) => (
        <Notification type={type}>
          <Notification.Title>{type.charAt(0).toUpperCase() + type.slice(1)}</Notification.Title>
          This is a {type} notification.
          <Notification.Close onClick={close} aria-label="Close" />
        </Notification>
      ),
      { placement: 'top-end', autoDismiss: true }
    );

  return (
    <>
      <Button onClick={() => showToast('success')}>Success toast</Button>
      <Button onClick={() => showToast('error')}>Error toast</Button>
    </>
  );
};

const NotificationExamples = () => (
  <ThemeProvider>
    {/* Global app-level banner */}
    <GlobalAlert type="warning">
      <GlobalAlert.Title>Scheduled maintenance</GlobalAlert.Title>
      The system will be unavailable from 2–4 AM UTC.
      <GlobalAlert.Button>View details</GlobalAlert.Button>
    </GlobalAlert>

    {/* Inline alert */}
    <Alert type="error">
      <Alert.Title>Submission failed</Alert.Title>
      Please correct the errors before continuing.
      <Alert.Close aria-label="Dismiss" />
    </Alert>

    {/* Well container */}
    <Well isRecessed>
      <p>Secondary content or contextual info displayed in a recessed panel.</p>
    </Well>

    {/* Toast system */}
    <ToastProvider zIndex={9999} limit={5}>
      <ToastTrigger />
    </ToastProvider>
  </ThemeProvider>
);

```

--------------------------------

### Accordion, Stepper, and Timeline Examples

Source: https://context7.com/zendeskgarden/react-components/llms.txt

Demonstrates the usage of Accordion for collapsible sections, Stepper for progress indication, and Timeline for chronological events.

```jsx
import React, { useState } from 'react';
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Accordion, Stepper, Timeline } from '@zendeskgarden/react-accordions';

const AccordionExamples = () => {
  const [activeStep, setActiveStep] = useState(1);

  return (
    <ThemeProvider>
      {/* Controlled accordion */}
      <Accordion level={3} isCollapsible isExpandable>
        <Accordion.Section>
          <Accordion.Header>
            <Accordion.Label>Account settings</Accordion.Label>
          </Accordion.Header>
          <Accordion.Panel>
            Manage your profile, password, and preferences.
          </Accordion.Panel>
        </Accordion.Section>
        <Accordion.Section>
          <Accordion.Header>
            <Accordion.Label>Billing</Accordion.Label>
          </Accordion.Header>
          <Accordion.Panel>
            View invoices and update your payment method.
          </Accordion.Panel>
        </Accordion.Section>
      </Accordion>

      {/* Stepper showing progress */}
      <Stepper activeIndex={activeStep} isHorizontal>
        <Stepper.Step>
          <Stepper.Label>Contact info</Stepper.Label>
          <Stepper.Content>Enter your name and email.</Stepper.Content>
        </Stepper.Step>
        <Stepper.Step>
          <Stepper.Label>Shipping</Stepper.Label>
          <Stepper.Content>Choose a delivery address.</Stepper.Content>
        </Stepper.Step>
        <Stepper.Step>
          <Stepper.Label>Payment</Stepper.Label>
          <Stepper.Content>Confirm and pay.</Stepper.Content>
        </Stepper.Step>
      </Stepper>

      {/* Timeline */}
      <Timeline>
        <Timeline.Item>
          <Timeline.OppositeContent>2024-01-15</Timeline.OppositeContent>
          <Timeline.Content>Ticket created by Jane Doe</Timeline.Content>
        </Timeline.Item>
        <Timeline.Item>
          <Timeline.OppositeContent>2024-01-16</Timeline.OppositeContent>
          <Timeline.Content>Assigned to support agent</Timeline.Content>
        </Timeline.Item>
        <Timeline.Item>
          <Timeline.OppositeContent>2024-01-17</Timeline.OppositeContent>
          <Timeline.Content>Resolved and closed</Timeline.Content>
        </Timeline.Item>
      </Timeline>
    </ThemeProvider>
  );
};

```

--------------------------------

### Date Picker Components Example

Source: https://context7.com/zendeskgarden/react-components/llms.txt

Demonstrates the usage of DatePicker for single date selection and DatePickerRange for selecting a date range.

```jsx
import React, { useState } from 'react';
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Field, Input } from '@zendeskgarden/react-forms';
import { DatePicker, DatePickerRange } from '@zendeskgarden/react-datepickers';

const DatePickerExamples = () => {
  const [date, setDate] = useState(new Date());
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

  return (
    <ThemeProvider>
      {/* Single date picker */}
      <Field>
        <Field.Label>Appointment date</Field.Label>
        <DatePicker
          value={date}
          onChange={d => setDate(d)}
          locale="en-US"
          formatDate={d => d.toLocaleDateString('en-US')}
          parseDate={str => new Date(str)}
          minValue={new Date()}
        >
          <Input placeholder="MM/DD/YYYY" />
        </DatePicker>
      </Field>

      {/* Date range picker */}
      <DatePickerRange startValue={startDate} endValue={endDate}>
        <Field>
          <Field.Label>From</Field.Label>
          <DatePickerRange.Start onChange={d => setStartDate(d)}>
            <Input placeholder="Start date" />
          </DatePickerRange.Start>
        </Field>
        <Field>
          <Field.Label>To</Field.Label>
          <DatePickerRange.End onChange={d => setEndDate(d)}>
            <Input placeholder="End date" />
          </DatePickerRange.End>
        </Field>
      </DatePickerRange>
    </ThemeProvider>
  );
};

```

--------------------------------

### Grid and Pane Layout Examples

Source: https://context7.com/zendeskgarden/react-components/llms.txt

Demonstrates a responsive columnar grid and a resizable pane layout using PaneProvider and Pane components. The Pane layout requires specific styling for display and dimensions.

```jsx
import React from 'react';
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Grid, PaneProvider, Pane } from '@zendeskgarden/react-grid';

const GridExamples = () => (
  <ThemeProvider>
    {/* Responsive columnar grid */}
    <Grid gutters="md">
      <Grid.Row justifyContent="center">
        <Grid.Col xs={12} md={8} lg={6}>Main content</Grid.Col>
        <Grid.Col xs={12} md={4} lg={3}>Sidebar</Grid.Col>
      </Grid.Row>
    </Grid>

    {/* Resizable pane layout */}
    <PaneProvider
      totalPanesHeight={600}
      totalPanesWidth={1000}
      defaultColumnValues={{ 'nav': 1, 'content': 3 }}
      defaultRowValues={{ 'main': 1 }}
    >
      {({ getGridTemplateColumns, getGridTemplateRows }) => (
        <div
          style={{
            display: 'grid',
            width: '1000px',
            height: '600px',
            gridTemplateColumns: getGridTemplateColumns(),
            gridTemplateRows: getGridTemplateRows()
          }}
        >
          <Pane>
            <Pane.Content>Navigation</Pane.Content>
            <Pane.Splitter layoutKey="nav" min={0.5} max={3} orientation="end">
              <Pane.SplitterButton label="Toggle navigation" />
            </Pane.Splitter>
          </Pane>
          <Pane>
            <Pane.Content>Main Content</Pane.Content>
          </Pane>
        </div>
      )}
    </PaneProvider>
  </ThemeProvider>
);

```

--------------------------------

### React Loader Component Examples

Source: https://context7.com/zendeskgarden/react-components/llms.txt

Demonstrates the usage of various loading indicators including Dots, Inline, Spinner, Progress, and Skeleton. Ensure ThemeProvider is used for proper rendering.

```jsx
import React, { useState, useEffect } from 'react';
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Dots, Inline, Progress, Skeleton, Spinner } from '@zendeskgarden/react-loaders';

const LoaderExamples = () => {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const timer = setInterval(
      () => setProgress(p => (p >= 100 ? 0 : p + 10)),
      500
    );
    return () => clearInterval(timer);
  }, []);

  return (
    <ThemeProvider>
      {/* Animated dot loader */}
      <Dots aria-label="Loading tickets" size={48} color="inherit" />

      {/* Inline loader (fits within text flow) */}
      <p>Saving changes <Inline aria-label="Saving" size={16} /></p>

      {/* Circular spinner */}
      <Spinner aria-label="Processing" size={64} />

      {/* Progress bar */}
      <Progress
        value={progress}
        aria-label={`Upload progress: ${progress}%`}
        color="successHue"
      />

      {/* Skeleton placeholders */}
      <Skeleton height="16px" width="200px" />
      <Skeleton height="16px" width="80%" style={{ marginTop: 8 }} />
      <Skeleton height="16px" width="60%" style={{ marginTop: 8 }} />
    </ThemeProvider>
  );
};

```

--------------------------------

### Implement Tooltip Examples

Source: https://context7.com/zendeskgarden/react-components/llms.txt

Showcases simple, rich, and controlled visibility tooltips. Tooltip content can be plain text or rich JSX. Ensure ThemeProvider is used for styling.

```jsx
import React from 'react';
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Tooltip } from '@zendeskgarden/react-tooltips';
import { IconButton } from '@zendeskgarden/react-buttons';
import InfoIcon from '@zendeskgarden/svg-icons/src/16/info-stroke.svg';

const TooltipExamples = () => (
  <ThemeProvider>
    {/* Simple tooltip */}
    <Tooltip content="Submit this form">
      <button>Submit</button>
    </Tooltip>

    {/* Rich tooltip with title and placement control */}
    <Tooltip
      content={
        <>
          <Tooltip.Title>Keyboard shortcut</Tooltip.Title>
          <Tooltip.Paragraph>Press Ctrl+S to save your work at any time.</Tooltip.Paragraph>
        </>
      }
      placement="end"
      type="light"
      size="large"
    >
      <IconButton aria-label="More information">
        <InfoIcon />
      </IconButton>
    </Tooltip>

    {/* Controlled visibility */}
    <Tooltip content="Always visible tooltip" isVisible>
      <span>Hover target</span>
    </Tooltip>
  </ThemeProvider>
);

```

--------------------------------

### Complete Form Example with React

Source: https://context7.com/zendeskgarden/react-components/llms.txt

Demonstrates the usage of various form components including Input, Select, MediaInput, InputGroup, Checkbox, Radio, Toggle, Range, and FileUpload within a React application. Includes state management for form values and validation.

```jsx
import React, { useState } from 'react';
import { ThemeProvider } from '@zendeskgarden/react-theming';
import {
  Field,
  Fieldset,
  Input,
  Textarea,
  Select,
  Checkbox,
  Radio,
  Toggle,
  Range,
  FileUpload,
  InputGroup,
  MediaInput,
  Tiles,
  VALIDATION
} from '@zendeskgarden/react-forms';
import SearchIcon from '@zendeskgarden/svg-icons/src/16/search-stroke.svg';

const FormExamples = () => {
  const [value, setValue] = useState('');
  const [checked, setChecked] = useState(false);
  const [range, setRange] = useState(50);

  return (
    <ThemeProvider>
      <form>
        {/* Text input with label, hint, and validation */}
        <Field>
          <Field.Label>Email address</Field.Label>
          <Field.Hint>We'll never share your email.</Field.Hint>
          <Input
            type="email"
            value={value}
            onChange={e => setValue(e.target.value)}
            validation={value.includes('@') ? VALIDATION.SUCCESS : VALIDATION.ERROR}
          />
          <Field.Message validation={value.includes('@') ? VALIDATION.SUCCESS : VALIDATION.ERROR}>
            {value.includes('@') ? 'Valid email' : 'Enter a valid email address'}
          </Field.Message>
        </Field>

        {/* Select */}
        <Field>
          <Field.Label>Role</Field.Label>
          <Select>
            <option value="admin">Admin</option>
            <option value="agent">Agent</option>
            <option value="viewer">Viewer</option>
          </Select>
        </Field>

        {/* Media input with icon */}
        <Field>
          <Field.Label>Search</Field.Label>
          <MediaInput start={<SearchIcon />} placeholder="Search tickets..." />
        </Field>

        {/* Input group (prefix + input + suffix) */}
        <InputGroup>
          <Button isBasic>http://</Button>
          <Input placeholder="example.com" />
          <Button isBasic>.com</Button>
        </InputGroup>

        {/* Checkbox */}
        <Field>
          <Checkbox checked={checked} onChange={e => setChecked(e.target.checked)}>
            <Field.Label>Accept terms</Field.Label>
          </Checkbox>
        </Field>

        {/* Radio group */}
        <Fieldset>
          <Fieldset.Legend>Notification preference</Fieldset.Legend>
          <Field>
            <Radio name="notify" value="email">
              <Field.Label>Email</Field.Label>
            </Radio>
          </Field>
          <Field>
            <Radio name="notify" value="sms">
              <Field.Label>SMS</Field.Label>
            </Radio>
          </Field>
        </Fieldset>

        {/* Toggle */}
        <Field>
          <Toggle>
            <Field.Label>Enable notifications</Field.Label>
          </Toggle>
        </Field>

        {/* Range slider */}
        <Field>
          <Field.Label>Volume: {range}</Field.Label>
          <Range value={range} onChange={e => setRange(Number(e.target.value))} />
        </Field>

        {/* File upload */}
        <Field>
          <Field.Label>Attachment</Field.Label>
          <FileUpload accept=".pdf,.png" isDragging={false}>
            <span>Drop files here or click to upload</span>
          </FileUpload>
        </Field>
      </form>
    </ThemeProvider>
  );
};

```

--------------------------------

### Accordion Uncontrolled Example

Source: https://github.com/zendeskgarden/react-components/blob/main/demo/accordion/accordion.mdx

Demonstrates the uncontrolled usage of the Accordion component. No explicit state management is required.

```javascript
import { Meta, ArgTypes, Canvas, Story, Markdown } from '@storybook/addon-docs/blocks';
import * as Stories from './accordion.stories';

<Meta of={Stories} />

# API

<ArgTypes />

# Demo

## Uncontrolled

<Canvas>
  <Story of={Stories.Uncontrolled} />
</Canvas>
```

--------------------------------

### Basic Combobox Example

Source: https://context7.com/zendeskgarden/react-components/llms.txt

A basic Combobox component configured for select-only interaction. Ensure options are provided as children.

```jsx
import React, { useState } from 'react';
import { ThemeProvider } from '@zendeskgarden/react-theming';
import {
  Field,
  Combobox,
  Option,
  OptGroup,
  Tag,
  Menu,
  Item,
  ItemGroup,
  Separator
} from '@zendeskgarden/react-dropdowns';

const OPTIONS = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape'];

const DropdownExamples = () => {
  const [inputValue, setInputValue] = useState('');
  const [selected, setSelected] = useState([]);

  const filtered = OPTIONS.filter(opt =>
    opt.toLowerCase().includes(inputValue.toLowerCase())
  );

  return (
    <ThemeProvider>
      {/* Basic combobox (select-only) */}
      <Field>
        <Field.Label>Choose a fruit</Field.Label>
        <Combobox isEditable={false}>
          {OPTIONS.map(opt => (
            <Option key={opt} value={opt} />
          ))}
        </Combobox>
      </Field>

      {/* Autocomplete + filtering combobox */}
      <Field>
        <Field.Label>Search fruits</Field.Label>
        <Combobox
          inputValue={inputValue}
          onInputChange={({ value }) => setInputValue(value)}
          autocomplete
        >
          {filtered.length === 0 ? (
            <Option isDisabled label="No results found" value="" />
          ) : (
            filtered.map(opt => <Option key={opt} value={opt} />)
          )}
        </Combobox>
      </Field>

      {/* Multi-select with tags */}
      <Field>
        <Field.Label>Select multiple fruits</Field.Label>
        <Combobox
          isMultiselectable
          selectionValue={selected}
          onChange={({ selectionValue }) => setSelected(selectionValue ?? [])}
          renderValue={({ selection }) =>
            selection.map(opt => (
              <Tag key={opt.value}>
                {opt.label}
                <Tag.Close aria-label={`Remove ${opt.label}`} />
              </Tag>
            ))
          }
        >
          {OPTIONS.map(opt => (
            <Option key={opt} value={opt} />
          ))}
        </Combobox>
      </Field>

      {/* Grouped options */}
      <Field>
        <Field.Label>Categorized</Field.Label>
        <Combobox>
          <OptGroup label="Citrus">
            <Option value="lemon" label="Lemon" />
            <Option value="lime" label="Lime" />
          </OptGroup>
          <OptGroup label="Berries">
            <Option value="strawberry" label="Strawberry" />
            <Option value="blueberry" label="Blueberry" />
          </OptGroup>
        </Combobox>
      </Field>

      {/* Menu with item groups and separator */}
      <Menu button="Actions">
        <ItemGroup aria-label="Edit">
          <Item value="cut" label="Cut" />
          <Item value="copy" label="Copy" />
          <Item value="paste" label="Paste" />
        </ItemGroup>
        <Separator />
        <Item value="delete" label="Delete" isDanger />
      </Menu>
    </ThemeProvider>
  );
};

```

--------------------------------

### Accordion Controlled Example

Source: https://github.com/zendeskgarden/react-components/blob/main/demo/accordion/accordion.mdx

Illustrates the controlled usage of the Accordion component, where the active panel is managed by component state.

```javascript
import { Meta, ArgTypes, Canvas, Story, Markdown } from '@storybook/addon-docs/blocks';
import * as Stories from './accordion.stories';

<Meta of={Stories} />

# API

<ArgTypes />

# Demo

## Controlled

<Canvas>
  <Story of={Stories.Controlled} />
</Canvas>
```
Tokens:
Raw