# Titanium.UI.OptionBar

> A bar of selectable buttons where only 1 can be selected at a time.

- Source: https://titaniumsdk.com/docs/sdk/13.2.0/Titanium.UI.OptionBar
- Titanium SDK version: 13.2.0
- Kind: view
- Platforms: Android, iPhone, iPad, macOS
- Since: Titanium SDK 10.0.0
- Extends: Titanium.UI.View
- Inheritance: Titanium.UI.View > Titanium.Proxy

| Android | iOS |
| ------- | --- |
| ![Android](./optionbar_android.png) |  |

This is a view which shows a list of options where only 1 option is selectable by the user.

On iOS, this displays a
[segmented control](https://developer.apple.com/design/human-interface-guidelines/ios/controls/segmented-controls/).

On Android, this displays a
[toggle button group](https://material.io/components/buttons/android#toggle-button).

Use the [Titanium.UI.createOptionBar](https://titaniumsdk.com/docs/sdk/Titanium.UI.md#createOptionBar) method to create a Option Bar.

## Example: Text-Only Buttons

Creates an option bar of text buttons.

``` js
const win = Ti.UI.createWindow();
const optionBar = Ti.UI.createOptionBar({
  labels: [ 'Option 1', 'Option 2', 'Option 3' ]
});
const btn = Ti.UI.createButton({
  title:"reset", bottom: 10
})
optionBar.addEventListener('click', (e) => {
  Ti.API.info(`Option ${e.index} was selected.`);
});
btn.addEventListener('click', (e) => {
  optionBar.index = -1;
});
win.add([optionBar,btn]);

win.open();
```

## Example: Image-Only Buttons

Creates an option bar of image-only buttons.

``` js
const win = Ti.UI.createWindow();
const optionBar = Ti.UI.createOptionBar({
  labels: [
    { image: '/Option1.png' },
    { image: '/Option2.png' },
    { image: '/Option3.png' },
  ]
});
optionBar.addEventListener('click', (e) => {
  Ti.API.info(`Option ${e.index} was selected.`);
});
win.add(optionBar);
win.open();
```

## Example: Buttons with Text and Images

Creates an option bar where each button shows an image to the left of its text.
This is only supported on Android. On iOS, if you set the `image` property,
then the `title` property is ignored.

``` js
const win = Ti.UI.createWindow();
const optionBar = Ti.UI.createOptionBar({
  labels: [
    { image: '/Option1.png', title: 'Option 1' },
    { image: '/Option2.png', title: 'Option 2' },
    { image: '/Option3.png', title: 'Option 3' },
  ]
});
optionBar.addEventListener('click', (e) => {
  Ti.API.info(`Option ${e.index} was selected.`);
});
win.add(optionBar);
win.open();
```

## Properties

### color

- Type: String | Titanium.UI.Color
- Platforms: Android
- Since: Titanium SDK 12.4.0

Text color of the unselected button

### index

- Type: Number
- Platforms: Android, iPhone, iPad, macOS

Index of the currently selected option.

Index of the currently selected option. Setting this to `-1` will deselect all options.

### labels

- Type: Array<String> | Array<BarItemType>
- Platforms: Android, iPhone, iPad, macOS

Array of labels for the option bar.

Setting this to an array of strings specifies the title of each option in the bar.

Alternatively, this can be set to an array of dictionary objects of type [BarItemType](https://titaniumsdk.com/docs/sdk/BarItemType.md)
which allows you to specify a title and/or image for each option in the bar.
Only Android supports setting both `title` and `image` properties on the same item.
On iOS, if you set the `image` property, then the `title` property is ignored.

### layout

- Type: String
- Platforms: Android, iPhone, iPad, macOS
- Default: `horizontal`

Specifies the layout direction such as 'horizontal' or 'vertical'.

This property is only supported on Android and allows you to display its toggle buttons
in ther `'vertical'` direction.

### selectedBackgroundColor

- Type: String | Titanium.UI.Color
- Platforms: Android
- Since: Titanium SDK 12.4.0

Background color of the selected button

### selectedBorderColor

- Type: String | Titanium.UI.Color
- Platforms: Android
- Since: Titanium SDK 12.4.0

Border color of the selected button

### selectedTextColor

- Type: String | Titanium.UI.Color
- Platforms: Android
- Since: Titanium SDK 12.4.0

Text color of the selected button

## Events

### click

- Platforms: Android, iPhone, iPad, macOS

Fired when an option has been selected.

Event properties:

- `index` (Number): Index of the option clicked on.

## Inherited members

89 members are inherited. Each is documented on the type that declares it.

- [Titanium.Proxy](https://titaniumsdk.com/docs/sdk/13.2.0/Titanium.Proxy.md): `addEventListener`, `apiName`, `applyProperties`, `bubbleParent`, `fireEvent`, `lifecycleContainer`, `removeEventListener`
- [Titanium.UI.View](https://titaniumsdk.com/docs/sdk/13.2.0/Titanium.UI.View.md): `accessibilityDisableLongPress`, `accessibilityHidden`, `accessibilityHint`, `accessibilityLabel`, `accessibilityValue`, `anchorPoint`, `animate`, `animatedCenter`, `backgroundColor`, `backgroundDisabledColor`, `backgroundDisabledImage`, `backgroundFocusedColor`, `backgroundFocusedImage`, `backgroundGradient`, `backgroundImage`, `backgroundLeftCap`, `backgroundRepeat`, `backgroundSelectedColor`, `backgroundSelectedImage`, `backgroundTopCap`, `borderColor`, `borderRadius`, `borderWidth`, `bottom`, `center`, `clearMotionEffects`, `clipMode`, `convertPointToView`, `elevation`, `filterTouchesWhenObscured`, `focus`, `focusable`, `getViewById`, `height`, `hiddenBehavior`, `hide`, `horizontalMotionEffect`, `horizontalWrap`, `id`, `insertAt`, `keepHardwareMode`, `keepScreenOn`, `keypressed`, `left`, `longpress`, `opacity`, `overrideCurrentAnimation`, `pinch`, `postlayout`, `previewContext`, `pullBackgroundColor`, `rect`, `right`, `rotate`, `rotation`, `rotationX`, `rotationY`, `scaleX`, `scaleY`, `show`, `size`, `softKeyboardOnFocus`, `stopAnimation`, `tintColor`, `toImage`, `tooltip`, `top`, `touchEnabled`, `touchFeedback`, `touchFeedbackColor`, `transform`, `transitionName`, `translationX`, `translationY`, `translationZ`, `verticalMotionEffect`, `viewShadowColor`, `viewShadowOffset`, `viewShadowRadius`, `visible`, `width`, `zIndex`

---

- This corpus documents Titanium SDK 13.4.1. Anything here that does not name a version describes 13.4.1.
- Titanium is maintained by TiDev. The Appcelerator toolchain is retired: there is no `appc` CLI, no Appcelerator Studio and no hosted build service. The supported CLI is `titanium` on npm, invoked as `ti`.