# TonePad

Two choices on one square: drag the handle between Formal and Casual, Brief and Detailed.

- **Use it for**: Two linked settings on one square, such as tone and length.
- **Not for**: One number, or exact values people type. Try [Slider](https://unseenui.com/components/slider/), [Input](https://unseenui.com/components/input/).

## Installation

```bash
npm install @stackunseen/ui
```

## Usage

```tsx
import { TonePad } from '@stackunseen/ui';
import { Field, Slider } from '@stackunseen/ui';
import '@stackunseen/ui/styles.css';

<Field label="Tone" labelAs="span"><TonePad value={tone} onValueChange={setTone} axes={{ x: ["Formal", "Casual"], y: ["Detailed", "Brief"] }} /></Field>
```

## All props

| Prop | Type | Description |
| --- | --- | --- |
| `axes` (required) | `TonePadAxes` |  |
| `disabled` | `boolean` |  |
| `label` | `string` | Names the control when it is not inside a Field. |
| `onValueChange` (required) | `(value: TonePadValue) => void` |  |
| `step` | `number` | Keyboard step on each axis, as a fraction (default 0.1). |
| `value` (required) | `TonePadValue` |  |

## Keyboard

Tab visits the two sliders; arrow keys move one step, Home and End to the ends. The square itself takes pointer input.

## Works with

[Field](https://unseenui.com/components/field/), [Input](https://unseenui.com/components/input/), [Textarea](https://unseenui.com/components/textarea/), [Checkbox](https://unseenui.com/components/checkbox/), [Switch](https://unseenui.com/components/switch/), [RadioGroup](https://unseenui.com/components/radio-group/), [Slider](https://unseenui.com/components/slider/), [InputGroup](https://unseenui.com/components/input-group/), [Combobox](https://unseenui.com/components/combobox/), [Calendar](https://unseenui.com/components/calendar/), [DateRangePicker](https://unseenui.com/components/date-range-picker/), [Select](https://unseenui.com/components/select/)

Page: https://unseenui.com/components/tone-pad/