@fluentui/react-swatch-picker NPM

@fluentui/react-swatch-picker

React Swatch Picker components for Fluent UI React

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:

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

Simple example of SwatchPicker Usage:

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 file for background information on the design/engineering decisions of the component.

API

For information about the components, please refer to the API documentation.

@fluentui/react-context-selector @fluentui/react-field @fluentui/react-icons @fluentui/react-jsx-runtime @fluentui/react-shared-contexts @fluentui/react-tabster @fluentui/react-theme @fluentui/react-utilities @griffel/react @swc/helpers

@fluentui/react-components

0.0.0-nightly-20250513-0406.1

5 months ago

0.0.0-nightly-20250527-0407.1

5 months ago

0.0.0-nightly-20241128-0406.1

11 months ago

0.0.0-nightly-20250325-0406.1

7 months ago

0.0.0-nightly-20250317-0407.1

7 months ago

0.0.0-nightly-20241202-0407.1

11 months ago

0.0.0-nightly-20241226-0405.1

10 months ago

0.0.0-nightly-20250603-0406.1

5 months ago

0.0.0-nightly-20250423-0405.1

6 months ago

0.0.0-nightly-20250415-0406.1

6 months ago

0.0.0-nightly-20250306-0406.1

8 months ago

0.0.0-nightly-20241104-0408.1

12 months ago

0.0.0-nightly-20250522-1841.1

5 months ago

0.0.0-nightly-20250320-0406.1

7 months ago

0.0.0-nightly-20241106-0406.1

12 months ago

0.0.0-nightly-20241120-0406.1

11 months ago

0.0.0-nightly-20250515-0405.1

5 months ago

0.0.0-nightly-20250205-0407.1

9 months ago

0.0.0-nightly-20250211-0406.1

8 months ago

0.0.0-nightly-20250502-0405.1

6 months ago

0.0.0-nightly-20250219-0406.1

8 months ago

0.0.0-nightly-20250319-0406.1

7 months ago

0.0.0-nightly-20250401-0406.1

7 months ago

0.0.0-nightly-20250213-0406.1

8 months ago

0.0.0-nightly-20250507-0406.1

6 months ago

0.0.0-nightly-20250505-0406.1

6 months ago

0.0.0-nightly-20250113-0407.1

9 months ago

0.0.0-nightly-20241224-0406.1

10 months ago

0.0.0-nightly-20241210-0407.1

11 months ago

0.0.0-nightly-20241218-0407.1

10 months ago

0.0.0-nightly-20250404-0406.1

7 months ago

0.0.0-nightly-20250312-0406.1

8 months ago

0.0.0-nightly-20250311-0406.1

8 months ago

0.0.0-nightly-20250407-0406.1

7 months ago

0.0.0-nightly-20250303-0407.1

8 months ago

9.2.8

5 months ago

0.0.0-nightly-20250519-0406.1

5 months ago

5 months ago

6 months ago

6 months ago

7 months ago

7 months ago

0.0.0-nightly-20250509-0405.1

6 months ago

9.2.2

7 months ago

9.2.1

8 months ago

9.2.9

4 months ago

0.0.0-nightly-20250402-0406.1

7 months ago

0.0.0-nightly-20250225-0406.1

8 months ago

0.0.0-nightly-20250226-0405.1

8 months ago

0.0.0-nightly-20250221-0406.1

8 months ago

0.0.0-nightly-20250522-0406.1

5 months ago

0.0.0-nightly-20250206-0407.1

9 months ago

0.0.0-nightly-20250116-0406.1

9 months ago

0.0.0-nightly-20250429-0405.1

6 months ago

0.0.0-nightly-20241217-0406.1

10 months ago

0.0.0-nightly-20250605-0406.1

5 months ago

0.0.0-nightly-20250414-0406.1

6 months ago

0.0.0-nightly-20241204-0407.1

11 months ago

0.0.0-nightly-20250529-0414.1

5 months ago

0.0.0-nightly-20250305-0406.1

8 months ago

0.0.0-nightly-20250418-0406.1

6 months ago

0.0.0-nightly-20241121-0406.1

11 months ago

0.0.0-nightly-20250109-0407.1

10 months ago

9.3.0

4 months ago

0.0.0-nightly-20250331-0406.1

7 months ago

0.0.0-nightly-20250514-1347.1

5 months ago

0.0.0-nightly-20241118-0406.1

11 months ago

0.0.0-nightly-20250326-0406.1

7 months ago

0.0.0-nightly-20250328-0406.1

7 months ago

0.0.0-nightly-20250227-0407.1

8 months ago

0.0.0-nightly-20250425-0406.1

6 months ago

0.0.0-nightly-20250423-1342.1

6 months ago

0.0.0-nightly-20250107-0406.1

10 months ago

0.0.0-nightly-20250101-0406.1

10 months ago

0.0.0-nightly-20241230-0407.1

10 months ago

0.0.0-nightly-20241211-0405.1

11 months ago

0.0.0-nightly-20250516-1358.1

5 months ago

0.0.0-nightly-20250421-0406.1

6 months ago

0.0.0-nightly-20250120-0408.1

9 months ago

0.0.0-nightly-20250609-0407.1

5 months ago

0.0.0-nightly-20250103-0406.1

10 months ago

0.0.0-nightly-20241223-0408.1

10 months ago

0.0.0-nightly-20241213-0405.1

10 months ago

0.0.0-nightly-20241114-0406.1

11 months ago

0.0.0-nightly-20241107-0407.1

12 months ago

0.0.0-nightly-20250612-0406.1

4 months ago

0.0.0-nightly-20250610-0406.1

5 months ago

9.2.0

8 months ago

0.0.0-nightly-20241112-0406.1

12 months ago

0.0.0-nightly-20250422-0932.1

6 months ago

0.0.0-nightly-20250520-0406.1

5 months ago

0.0.0-nightly-20250528-0406.1

5 months ago

0.0.0-nightly-20250324-0407.1

7 months ago

0.0.0-nightly-20250212-0406.1

8 months ago

0.0.0-nightly-20250506-0406.1

6 months ago

0.0.0-nightly-20250430-0406.1

6 months ago

0.0.0-nightly-20250114-0406.1

9 months ago

0.0.0-nightly-20241225-0407.1

10 months ago

0.0.0-nightly-20250424-0405.1

6 months ago

0.0.0-nightly-20250604-0406.1

5 months ago

0.0.0-nightly-20241206-0407.1

11 months ago

0.0.0-nightly-20250313-0407.1

7 months ago

0.0.0-nightly-20241105-0406.1

12 months ago

0.0.0-nightly-20250416-0406.1

6 months ago

0.0.0-nightly-20250108-0405.1

10 months ago

0.0.0-nightly-20250210-0407.1

9 months ago

0.0.0-nightly-20250501-0406.1

6 months ago

0.0.0-nightly-20250513-1612.1

5 months ago

0.0.0-nightly-20241127-0406.1

11 months ago

0.0.0-nightly-20241119-0407.1

11 months ago

0.0.0-nightly-20250423-1415.1

6 months ago

0.0.0-nightly-20250228-0406.1

8 months ago

0.0.0-nightly-20250220-0406.1

8 months ago

0.0.0-nightly-20250526-0407.1

5 months ago

0.0.0-nightly-20250508-0405.1

6 months ago

0.0.0-nightly-20250226-1850.1

8 months ago

0.0.0-nightly-20250207-0407.1

9 months ago

0.0.0-nightly-20241220-0406.1

10 months ago

0.0.0-nightly-20250606-0405.1

5 months ago

0.0.0-nightly-20241227-0406.1

10 months ago

0.0.0-nightly-20241219-0407.1

10 months ago

0.0.0-nightly-20250410-0405.1

7 months ago

0.0.0-nightly-20250307-0407.1

8 months ago

0.0.0-nightly-20250403-0406.1

7 months ago

0.0.0-nightly-20250408-0406.1

7 months ago

0.0.0-nightly-20241122-0407.1

11 months ago

0.0.0-nightly-20241111-0408.1

12 months ago

0.0.0-nightly-20250310-0406.1

8 months ago

9.1.17

10 months ago

9.1.18

10 months ago

9.1.19

9 months ago

0.0.0-nightly-20250218-0406.1

8 months ago

9.1.13

12 months ago

9.1.14

11 months ago

0.0.0-nightly-20241126-0406.1

11 months ago

9.1.15

11 months ago

0.0.0-nightly-20241125-0407.1

11 months ago

0.0.0-nightly-20250327-0406.1

7 months ago

9.1.16

11 months ago

0.0.0-nightly-20241129-0407.1

11 months ago

0.0.0-nightly-20250530-0405.1

5 months ago

0.0.0-nightly-20250514-1518.1

5 months ago

0.0.0-nightly-20250224-0407.1

8 months ago

0.0.0-nightly-20241216-0406.1

10 months ago

0.0.0-nightly-20241209-0407.1

11 months ago

0.0.0-nightly-20241212-0406.1

11 months ago

0.0.0-nightly-20241203-0405.1

11 months ago

9.1.20

9 months ago

0.0.0-nightly-20241231-0406.1

10 months ago

0.0.0-nightly-20250304-0406.1

8 months ago

0.0.0-nightly-20250417-0406.1

6 months ago

0.0.0-nightly-20241113-0407.1

11 months ago

0.0.0-nightly-20250602-0406.1

5 months ago

0.0.0-nightly-20250516-0406.1

5 months ago

0.0.0-nightly-20250514-0406.1

5 months ago

0.0.0-nightly-20250512-0406.1

5 months ago

0.0.0-nightly-20250501-1704.1

6 months ago

0.0.0-nightly-20250318-0407.1

7 months ago

0.0.0-nightly-20250521-0406.1

5 months ago

0.0.0-nightly-20250214-0405.1

8 months ago

0.0.0-nightly-20250523-0406.1

5 months ago

0.0.0-nightly-20250422-0406.1

6 months ago

0.0.0-nightly-20250102-0406.1

10 months ago

0.0.0-nightly-20250106-0406.1

10 months ago

0.0.0-nightly-20241205-0406.1

11 months ago

0.0.0-nightly-20250529-1800.1

5 months ago

0.0.0-nightly-20241108-0407.1

12 months ago

0.0.0-nightly-20250321-0407.1

7 months ago

0.0.0-nightly-20241115-0406.1

11 months ago

0.0.0-nightly-20250611-0406.1

4 months ago

0.0.0-nightly-20250428-0406.1

6 months ago

0.0.0-nightly-20241101-0407.1

12 months ago

0.0.0-nightly-20241031-0408.1

12 months ago

0.0.0-nightly-20241030-0406.1

12 months ago

0.0.0-nightly-20241028-0410.1

12 months ago

0.0.0-nightly-20241029-0406.1

12 months ago

0.0.0-nightly-20241025-0408.1

12 months ago

0.0.0-nightly-20241023-0407.1

1 year ago

0.0.0-nightly-20241022-0408.1

1 year ago

0.0.0-nightly-20241017-0409.1

1 year ago

0.0.0-nightly-20241018-0406.1

1 year ago

9.1.12

1 year ago

0.0.0-nightly-20241015-1519.1

1 year ago

0.0.0-nightly-20241016-0407.1

1 year ago

0.0.0-nightly-20241015-0407.1

1 year ago

0.0.0-nightly-20241014-0408.1

1 year ago

0.0.0-nightly-20241011-0406.1

1 year ago

0.0.0-nightly-20241007-0407.1

1 year ago

0.0.0-nightly-20241004-0410.1

1 year ago

0.0.0-nightly-20241002-0405.1

1 year ago

0.0.0-nightly-20241003-0406.1

1 year ago

0.0.0-nightly-20241010-0408.1

1 year ago

0.0.0-nightly-20241009-0406.1

1 year ago

0.0.0-nightly-20241008-0405.1

1 year ago

0.0.0-nightly-20240926-0406.1

1 year ago

0.0.0-nightly-20240927-0406.1

1 year ago

9.1.11

1 year ago

0.0.0-nightly-20241001-0407.1

1 year ago

0.0.0-nightly-20240930-0408.1

1 year ago

0.0.0-nightly-20240925-0407.1

1 year ago

0.0.0-nightly-20240924-0407.1

1 year ago

9.1.10

1 year ago

0.0.0-nightly-20240917-0407.1

1 year ago

0.0.0-nightly-20240919-0407.1

1 year ago

0.0.0-nightly-20240918-0406.1

1 year ago

0.0.0-nightly-20240920-0408.1

1 year ago

0.0.0-nightly-20240916-0409.1

1 year ago

0.0.0-nightly-20240913-0407.1

1 year ago

0.0.0-nightly-20240912-0407.1

1 year ago

9.1.9

1 year ago

0.0.0-nightly-20240911-0407.1

1 year ago

0.0.0-nightly-20240910-0407.1

1 year ago

0.0.0-nightly-20240909-0407.1

1 year ago

0.0.0-nightly-20240905-0407.1

1 year ago

0.0.0-nightly-20240906-0406.1

1 year ago

0.0.0-nightly-20240904-0407.1

1 year ago

0.0.0-nightly-20240903-0407.1

1 year ago

0.0.0-nightly-20240902-0406.1

1 year ago

0.0.0-nightly-20240830-0406.1

1 year ago

0.0.0-nightly-20240829-0406.1

1 year ago

0.0.0-nightly-20240828-0407.1

1 year ago

0.0.0-nightly-20240827-0406.1

1 year ago

0.0.0-nightly-20240718-0406.1

1 year ago

0.0.0-nightly-20240719-0407.1

1 year ago

0.0.0-nightly-20240716-0408.1

1 year ago

0.0.0-nightly-20240709-0406.1

1 year ago

0.0.0-nightly-20240726-0407.1

1 year ago

0.0.0-nightly-20240531-0406.1

1 year ago

0.0.0-nightly-20240523-0405.1

1 year ago

0.0.0-nightly-20240729-0406.1

1 year ago

0.0.0-nightly-20240826-0407.1

1 year ago

0.0.0-nightly-20240527-0405.1

1 year ago

0.0.0-nightly-20240712-1436.1

1 year ago

0.0.0-nightly-20240727-2000.1

1 year ago

0.0.0-nightly-20240528-0406.1

1 year ago

0.0.0-nightly-20240823-1802.1

1 year ago

0.0.0-nightly-20240724-0407.1

1 year ago

0.0.0-nightly-20240703-0406.1

1 year ago

0.0.0-nightly-20240529-0405.1

1 year ago

0.0.0-nightly-20240731-0407.1

1 year ago

0.0.0-nightly-20240704-0407.1

1 year ago

0.0.0-nightly-20240723-0406.1

1 year ago

0.0.0-nightly-20240722-0407.1

1 year ago

0.0.0-nightly-20240610-0945.1

1 year ago

0.0.0-nightly-20240613-0406.1

1 year ago

0.0.0-nightly-20240612-0406.1

1 year ago

0.0.0-nightly-20240620-0405.1

1 year ago

0.0.0-nightly-20240727-0949.1

1 year ago

0.0.0-nightly-20240607-0405.1

1 year ago

0.0.0-nightly-20240522-0406.1

1 year ago

0.0.0-nightly-20240819-2052.1

1 year ago

0.0.0-nightly-20240606-0405.1

1 year ago

0.0.0-nightly-20240605-0405.1

1 year ago

0.0.0-nightly-20240717-1138.1

1 year ago

9.1.1

1 year ago

0.0.0-nightly-20240819-2137.1

1 year ago

0.0.0-nightly-20240819-2110.1

1 year ago

0.0.0-nightly-20240618-0404.1

1 year ago

9.1.8

1 year ago

0.0.0-nightly-20240606-0726.1

1 year ago

9.1.7

1 year ago

0.0.0-nightly-20240816-2133.1

1 year ago

9.1.6

1 year ago

0.0.0-nightly-20240712-0407.1

1 year ago

9.1.5

1 year ago

0.0.0-nightly-20240530-0408.1

1 year ago

0.0.0-nightly-20240822-1237.1

1 year ago

9.1.4

1 year ago

0.0.0-nightly-20240701-0407.1

1 year ago

0.0.0-nightly-20240711-0408.1

1 year ago

0.0.0-nightly-20240702-0406.1

1 year ago

9.1.3

1 year ago

0.0.0-nightly-20240717-0406.1

1 year ago

0.0.0-nightly-20240710-0407.1

1 year ago

9.1.2

1 year ago

0.0.0-nightly-20240524-0405.1

1 year ago

0.0.0-nightly-20240607-1142.1

1 year ago

0.0.0-nightly-20240726-2023.1

1 year ago

0.0.0-nightly-20240725-0409.1

1 year ago

0.0.0-nightly-20240730-0407.1

1 year ago

0.0.0-nightly-20240628-0406.1

1 year ago

0.0.0-nightly-20240625-0406.1

1 year ago

0.0.0-nightly-20240621-0406.1

1 year ago

0.0.0-nightly-20240624-0406.1

1 year ago

0.0.0-nightly-20240610-0407.1

1 year ago

0.0.0-nightly-20240611-0405.1

1 year ago

0.0.0-nightly-20240603-0406.1

1 year ago

0.0.0-nightly-20240820-2210.1

1 year ago

0.0.0-nightly-20240822-0407.1

1 year ago

0.0.0-nightly-20240604-0406.1

1 year ago

0.0.0-nightly-20240823-0407.1

1 year ago

0.0.0-nightly-20240614-0405.1

1 year ago

0.0.0-nightly-20240617-0407.1

1 year ago

0.0.0-nightly-20240627-0406.1

1 year ago

0.0.0-nightly-20240626-0406.1

1 year ago

0.0.0-nightly-20240619-0407.1

1 year ago

0.0.0-nightly-20240521-0405.1

1 year ago

9.1.0

1 year ago

0.0.0-nightly-20240520-0407.1

1 year ago

0.0.0-nightly-20240517-0405.1

1 year ago