# @fluentui/react-swatch-picker

> New fluentui react package

Latest version **9.6.2** (published 2026-09-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @fluentui/react-swatch-picker
pnpm add @fluentui/react-swatch-picker
yarn add @fluentui/react-swatch-picker
bun add @fluentui/react-swatch-picker
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; popular repo.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 9.6.2 |
| Published | 2026-09-21 |
| First published | 2024-05-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 10 |
| Unpacked size | 469.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20292 |
| Maintainers | uifabricteam, uifrnbot, microsoft1es, microsoft-oss-releases |

## Links

- npm: https://www.npmjs.com/package/@fluentui/react-swatch-picker
- Repository: https://github.com/microsoft/fluentui
- Homepage: https://github.com/microsoft/fluentui#readme
- Issues: https://github.com/microsoft/fluentui/issues
- npm.io page: https://npm.io/package/@fluentui/react-swatch-picker

## Dependencies (10)

- [@swc/helpers](https://npm.io/package/@swc/helpers.md) ^0.5.1
- [@griffel/react](https://npm.io/package/@griffel/react.md) ^1.5.32
- [@fluentui/react-field](https://npm.io/package/@fluentui/react-field.md) ^9.5.5
- [@fluentui/react-icons](https://npm.io/package/@fluentui/react-icons.md) ^2.0.245
- [@fluentui/react-theme](https://npm.io/package/@fluentui/react-theme.md) ^9.2.2
- [@fluentui/react-tabster](https://npm.io/package/@fluentui/react-tabster.md) ^9.26.18
- [@fluentui/react-utilities](https://npm.io/package/@fluentui/react-utilities.md) ^9.26.7
- [@fluentui/react-jsx-runtime](https://npm.io/package/@fluentui/react-jsx-runtime.md) ^9.4.6
- [@fluentui/react-shared-contexts](https://npm.io/package/@fluentui/react-shared-contexts.md) ^9.26.4
- [@fluentui/react-context-selector](https://npm.io/package/@fluentui/react-context-selector.md) ^9.2.20

## Recent versions

- 9.6.2 (latest) — 2026-09-21
- 0.0.0-nightly-20261002-0407.1 (nightly) — 2026-10-02
- 9.74.5-experimental.tabster-v9.20260804-bb909442fe.0 (experimental) — 2026-08-04
- 0.0.0-nightly-20260929-0404.1 — 2026-09-29
- 0.0.0-nightly-20260928-0404.1 — 2026-09-28
- 0.0.0-nightly-20260925-0403.1 — 2026-09-25
- 0.0.0-nightly-20260924-0403.1 — 2026-09-24
- 0.0.0-nightly-20260923-0404.1 — 2026-09-23
- 0.0.0-nightly-20260922-0403.1 — 2026-09-22
- 0.0.0-nightly-20260917-0408.1 — 2026-09-17
- 0.0.0-nightly-20260916-0409.1 — 2026-09-16
- 0.0.0-nightly-20260915-0407.1 — 2026-09-15
- 0.0.0-nightly-20260914-0407.1 — 2026-09-14
- 0.0.0-nightly-20260910-0408.1 — 2026-09-10
- 0.0.0-nightly-20260909-0407.1 — 2026-09-09
- … 637 more at https://npm.io/package/@fluentui/react-swatch-picker/versions

## README

# @fluentui/react-swatch-picker

**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**

The SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.
The SwatchPicker can be integrated within a popover or used as a standalone feature.

## Usage

To import React SwatchPicker components:

```tsx
import { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';
```

Simple example of SwatchPicker Usage:

```tsx
import { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';

export const App = () => {
  const [selectedValue, setSelectedValue] = React.useState('00B053');
  const [selectedColor, setSelectedColor] = React.useState('#00B053');
  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {
    setSelectedValue(data.selectedValue);
    setSelectedColor(data.selectedColor);
  };

  return (
    <>
      <SwatchPicker aria-label="SwatchPicker default" selectedValue={selectedValue} onSelectionChange={handleSelect}>
        <ColorSwatch color="#FF1921" value="FF1921" aria-label="red" />
        <ColorSwatch color="#FFC12E" value="FFC12E" aria-label="orange" />
        <ColorSwatch color="#FEFF37" value="FEFF37" aria-label="yellow" />
        <ColorSwatch disabled color="#90D057" value="90D057" aria-label="light green" />
        <ColorSwatch color="#00B053" value="00B053" aria-label="green" />
        <ColorSwatch color="#00AFED" value="00AFED" aria-label="light blue" />
        <ColorSwatch color="#006EBD" value="006EBD" aria-label="blue" />
        <ColorSwatch color="#011F5E" value="011F5E" aria-label="dark blue" />
        <ColorSwatch color="#712F9E" value="712F9E" aria-label="purple" />
      </SwatchPicker>

      <div
        style={{
          backgroundColor: selectedColor,
        }}
      />
    </>
  );
};
```

## Specification

See the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.

## API

For information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/components-swatchpicker--default).

---
_Source: https://npm.io/package/@fluentui/react-swatch-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._