# Palette

The `Palette` component is used to display a grid of icons, emojis, reactions, and symbols which you can select or deselect.

```tsx
import {Palette} from '@gravity-ui/uikit';
```

### Disabled state

You can disable every option using the `disabled` property. If you want to disable only certain options, you can change the `disabled` property of those `options` (`PaletteOption[]`).

```tsx
const options: PaletteOption[] = [
  // disable a single item
  {content: '😎', value: 'ID-cool', disabled: true},
  {content: '🥴', value: 'ID-woozy'},
];
// or disable all of them
<Palette options={options} disabled={true} />;
```

### Size

Use the `size` property to manage the `Palette` size. The default size is `s`.

```tsx
const options: PaletteOption[] = [
    {content: '😎', value: 'ID-cool'},
    {content: '🥴', value: 'ID-woozy'},
];
<Palette options={options} size={"xs"} />
<Palette options={options} size={"s"} />
<Palette options={options} size={"m"} />
<Palette options={options} size={"l"} />
<Palette options={options} size={"xl"} />
```

### Columns

You can change the number of columns in the grid by changing the `columns` property (the default value is `6`).

```tsx
const options: PaletteOption[] = [
  {content: '😎', value: 'ID-cool'},
  {content: '🥴', value: 'ID-woozy'},
];
<Palette options={options} columns={1} />;
```

### Multiple

By default, you can select and deselect multiple options. In case you only want to make a single option selectable, you can disable the `multiple` property.

```tsx
const options: PaletteOption[] = [
  {content: '😎', value: 'ID-cool'},
  {content: '🥴', value: 'ID-woozy'},
];
<Palette options={options} columns={1} />;
```

## Properties

`PaletteProps`:

| Name            | Description                                                                           |                          Type                          | Default |
| :-------------- | :------------------------------------------------------------------------------------ | :----------------------------------------------------: | :-----: |
| aria-label      | `aria-label` HTML attribute                                                           |                        `string`                        |         |
| aria-labelledby | ID of the visible `Palette` caption element                                           |                        `string`                        |         |
| className       | `class` HTML attribute                                                                |                        `string`                        |         |
| columns         | Number of elements per row                                                            |                        `number`                        |   `6`   |
| defaultValue    | Sets the initial value state when the component is mounted                            |                       `string[]`                       |         |
| disabled        | Disables the options                                                                  |                       `boolean`                        | `false` |
| multiple        | Enables selecting multiple options                                                    |                       `boolean`                        | `true`  |
| onBlur          | `onBlur` event handler                                                                | `(event: React.FocusEvent<HTMLButtonElement>) => void` |         |
| onFocus         | `onFocus` event handler                                                               | `(event: React.FocusEvent<HTMLButtonElement>) => void` |         |
| onUpdate        | Fires when the user changes the state Provides the new value as a callback's argument |              `(value: string[]) => void`               |         |
| optionClassName | `class` HTML attribute for the palette button                                         |                        `string`                        |         |
| options         | List of options (palette elements)                                                    |                   `PaletteOption[]`                    |  `[]`   |
| qa              | `data-qa` HTML attribute, used for testing                                            |                        `string`                        |         |
| rowClassName    | `class` HTML attribute for a palette row                                              |                        `string`                        |         |
| size            | Sets the size of the elements                                                         |                 `xs` `s` `m` `l` `xl`                  |   `m`   |
| style           | `style` HTML attribute                                                                |                 `React.CSSProperties`                  |         |
| value           | Current value for the controlled usage of the component                               |                       `string[]`                       |         |

`PaletteOption`:

| Name     | Description            |    Type     | Default |
| :------- | :--------------------- | :---------: | :-----: |
| content  | `class` HTML attribute | `ReactNode` |         |
| disabled | Disables the button    |  `boolean`  | `false` |
| title    | `title` HTML attribute |  `string`   |         |
| value    | Control value          |  `string`   |         |