# SelectButtonsProps

**Kind:** Interface

Props for the `SelectButtons` component. Also accepts:
* `SelectButtonsStyleProps`

## Properties

### `aria-describedby?`

Type: `undefined | string`

A space separated list of description element IDs.

### `aria-label?`

Type: `undefined | string`

The `aria-label` attribute. Use this if the select is not referenced by a label element.

### `aria-labelledby?`

Type: `undefined | string`

A space separated list of label element IDs.

### `className?`

Type: `undefined | string`

Additional class names to apply to the select.

### `disabled?`

Type: `undefined | false | true`

If set to `true`, the user cannot interact with the select.

### `onChange?`

Type: `undefined | object`

A function to be called when the selected option changes.

### `options`

Type: `Array<SelectOption>`

The list of select options.

### `size?`

Type: `ControlSizeProp`

The size of the select buttons.

### `style?`

Type: `React.CSSProperties`

Additional styles to apply to the select.

### `value`

Type: `SelectOptionValue`

The value of the selected option.

---

## SelectButtonsSyncedProps

**Kind:** Interface

Props for the `SelectButtonsSynced` component. Also accepts:
* `SelectButtonsStyleProps`

### Properties

#### `aria-describedby?`

Type: `undefined | string`

A space separated list of description element IDs.

#### `aria-label?`

Type: `undefined | string`

The `aria-label` attribute. Use this if the select is not referenced by a label element.

#### `aria-labelledby?`

Type: `undefined | string`

A space separated list of label element IDs.

#### `className?`

Type: `undefined | string`

Additional class names to apply to the select.

#### `disabled?`

Type: `undefined | false | true`

If set to `true`, the user cannot interact with the select.

#### `globalConfigKey`

Type: `GlobalConfigKey`

A string key or array key path in `GlobalConfig`. The selected option will always reflect the value stored in `GlobalConfig` for this key. Selecting a new option will update `GlobalConfig`.

#### `onChange?`

Type: `undefined | object`

A function to be called when the selected option changes.

#### `options`

Type: `Array<SelectOption>`

The list of select options.

#### `size?`

Type: `ControlSizeProp`

The size of the select buttons.

#### `style?`

Type: `React.CSSProperties`

Additional styles to apply to the select.

---

## SelectButtons

**Kind:** Component

A segmented control for selecting one value from a set of options.

[[ Story id="selectbuttons--example" title="Select buttons example" ]]

**Parameters:**
- `props` (`SelectButtonsProps`)
- `ref` (`React.Ref<HTMLDivElement>`)

**Returns:** `Element`

---

## SelectButtonsSynced

**Kind:** Component

A wrapper around the `SelectButtons` component that syncs with `GlobalConfig`.

[[ Story id="selectbuttons--synced-example" title="SelectButtonsSynced example" ]]

**Parameters:**
- `props` (`SelectButtonsSyncedProps`)
- `ref` (`React.Ref<HTMLDivElement>`)

**Returns:** `Element`