---
title: "SelectBadge"
description: "SelectBadge is an interactive badge that can open a dropdown with selectable options."
sidebar_label: "SelectBadge"
slug: /reference/components/selectbadge
---

import ComponentDemo from '@site/src/components/ComponentDemo';

# SelectBadge

SelectBadge is an interactive badge that can open a dropdown with selectable options.

**Package:** `@terreno/ui`  
**Categories:** Component  
**Props interface:** `SelectBadgeProps`  
**Story source:** [`demo/stories/SelectBadge.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/SelectBadge.stories.tsx)

## Live demo

<ComponentDemo name="SelectBadge" />

## Props

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `onChange` | `reflection` | Yes | The function to call when the selected value changes. |
| `options` | `array` | Yes | The options available for the dropdown badge. Each option should have a label and a value. |
| `customBackgroundColor` | `string` |  | When status is "custom", determines the badge's background color. |
| `customBorderColor` | `string` |  | When status is "custom", determines the badge's border color. |
| `customTextColor` | `string` |  | When status is "custom", determines the badge's text color. |
| `disabled` | `boolean` |  | If true, the badge will be disabled and not interactive. |
| `secondary` | `boolean` |  | If true, the badge will have a secondary style. |
| `status` | `union` |  | The status of the badge. Determines its color and appearance. |
| `value` | `string` |  | The current value of the select field. |