Select

Show design guidelines

A flexible select component supporting single/multi-select, search, async loading, and creatable options. Compatible with react-select, select2, and mat-select patterns.

Code

Framework HTML React Angular

Default

Option 1 Option 2 Option 3

Toggle dark mode

<certara-select placeholder="Select an option">
  <certara-select-option value="1">Option 1</certara-select-option>
  <certara-select-option value="2">Option 2</certara-select-option>
  <certara-select-option value="3">Option 3</certara-select-option>
</certara-select>

import { CertaraSelect, CertaraSelectOption } from '@certara/certara-ui-react';

<CertaraSelect placeholder="Select an option">
  <CertaraSelectOption value={1}>Option 1</CertaraSelectOption>
  <CertaraSelectOption value={2}>Option 2</CertaraSelectOption>
  <CertaraSelectOption value={3}>Option 3</CertaraSelectOption>
</CertaraSelect>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-select placeholder="Select an option">
  <certara-select-option value="1">Option 1</certara-select-option>
  <certara-select-option value="2">Option 2</certara-select-option>
  <certara-select-option value="3">Option 3</certara-select-option>
</certara-select>

Multiple

Option 1 Option 2 Option 3

Toggle dark mode

<certara-select placeholder="Select options" multiple>
  <certara-select-option value="1">Option 1</certara-select-option>
  <certara-select-option value="2">Option 2</certara-select-option>
  <certara-select-option value="3">Option 3</certara-select-option>
</certara-select>

import { CertaraSelect, CertaraSelectOption } from '@certara/certara-ui-react';

<CertaraSelect placeholder="Select options" multiple>
  <CertaraSelectOption value={1}>Option 1</CertaraSelectOption>
  <CertaraSelectOption value={2}>Option 2</CertaraSelectOption>
  <CertaraSelectOption value={3}>Option 3</CertaraSelectOption>
</CertaraSelect>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-select placeholder="Select options" multiple>
  <certara-select-option value="1">Option 1</certara-select-option>
  <certara-select-option value="2">Option 2</certara-select-option>
  <certara-select-option value="3">Option 3</certara-select-option>
</certara-select>

With groups

Option 1 Option 2 Option 3 Option 4

Toggle dark mode

<certara-select placeholder="Select an option">
  <certara-select-optgroup label="Group 1">
    <certara-select-option value="1">Option 1</certara-select-option>
    <certara-select-option value="2">Option 2</certara-select-option>
  </certara-select-optgroup>
  <certara-select-optgroup label="Group 2">
    <certara-select-option value="3">Option 3</certara-select-option>
    <certara-select-option value="4">Option 4</certara-select-option>
  </certara-select-optgroup>
</certara-select>

import { CertaraSelect, CertaraSelectOptgroup, CertaraSelectOption } from '@certara/certara-ui-react';

<CertaraSelect placeholder="Select an option">
  <CertaraSelectOptgroup label="Group 1">
    <CertaraSelectOption value={1}>Option 1</CertaraSelectOption>
    <CertaraSelectOption value={2}>Option 2</CertaraSelectOption>
  </CertaraSelectOptgroup>
  <CertaraSelectOptgroup label="Group 2">
    <CertaraSelectOption value={3}>Option 3</CertaraSelectOption>
    <CertaraSelectOption value={4}>Option 4</CertaraSelectOption>
  </CertaraSelectOptgroup>
</CertaraSelect>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-select placeholder="Select an option">
  <certara-select-optgroup label="Group 1">
    <certara-select-option value="1">Option 1</certara-select-option>
    <certara-select-option value="2">Option 2</certara-select-option>
  </certara-select-optgroup>
  <certara-select-optgroup label="Group 2">
    <certara-select-option value="3">Option 3</certara-select-option>
    <certara-select-option value="4">Option 4</certara-select-option>
  </certara-select-optgroup>
</certara-select>

Rich content

Draft New In Review Pending Approved Complete Rejected Action Required

Toggle dark mode

<certara-select placeholder="Select status...">
  <certara-select-option value="draft">
    Draft
    <certara-badge variant="neutral">New</certara-badge>
  </certara-select-option>
  <certara-select-option value="review">
    In Review
    <certara-badge variant="warning">Pending</certara-badge>
  </certara-select-option>
  <certara-select-option value="approved">
    Approved
    <certara-badge variant="success">Complete</certara-badge>
  </certara-select-option>
  <certara-select-option value="rejected">
    Rejected
    <certara-badge variant="danger">Action Required</certara-badge>
  </certara-select-option>
</certara-select>

import { CertaraBadge, CertaraSelect, CertaraSelectOption } from '@certara/certara-ui-react';

<CertaraSelect placeholder="Select status...">
  <CertaraSelectOption value="draft">
    Draft
    <CertaraBadge variant="neutral">New</CertaraBadge>
  </CertaraSelectOption>
  <CertaraSelectOption value="review">
    In Review
    <CertaraBadge variant="warning">Pending</CertaraBadge>
  </CertaraSelectOption>
  <CertaraSelectOption value="approved">
    Approved
    <CertaraBadge variant="success">Complete</CertaraBadge>
  </CertaraSelectOption>
  <CertaraSelectOption value="rejected">
    Rejected
    <CertaraBadge variant="danger">Action Required</CertaraBadge>
  </CertaraSelectOption>
</CertaraSelect>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-select placeholder="Select status...">
  <certara-select-option value="draft">
    Draft
    <certara-badge variant="neutral">New</certara-badge>
  </certara-select-option>
  <certara-select-option value="review">
    In Review
    <certara-badge variant="warning">Pending</certara-badge>
  </certara-select-option>
  <certara-select-option value="approved">
    Approved
    <certara-badge variant="success">Complete</certara-badge>
  </certara-select-option>
  <certara-select-option value="rejected">
    Rejected
    <certara-badge variant="danger">Action Required</certara-badge>
  </certara-select-option>
</certara-select>

Disabled

Option 1 Option 2

Toggle dark mode

<certara-select placeholder="Select an option" disabled>
  <certara-select-option value="1">Option 1</certara-select-option>
  <certara-select-option value="2">Option 2</certara-select-option>
</certara-select>

import { CertaraSelect, CertaraSelectOption } from '@certara/certara-ui-react';

<CertaraSelect placeholder="Select an option" disabled>
  <CertaraSelectOption value={1}>Option 1</CertaraSelectOption>
  <CertaraSelectOption value={2}>Option 2</CertaraSelectOption>
</CertaraSelect>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-select placeholder="Select an option" disabled>
  <certara-select-option value="1">Option 1</certara-select-option>
  <certara-select-option value="2">Option 2</certara-select-option>
</certara-select>

Dynamic Select Options in React

With renderOptionHtml

The best way to render dynamic option labels in react is to use the renderOptionHtml prop. Use this function to return an HTML string which will be injected into the select options. Note: this MUST be a plain string, not JSX.

DynamicSelectOptions

import React, {useState} from 'react';
import {CertaraSelect, CertaraButton} from '@certara/certara-ui-react';

function optionHtml(option) {
  return `<div>${option.label} <certara-badge>value: ${option.value}</certara-badge></div>`;
}

function generateRandomOption() {
  return {
    value: Math.random().toString(36).slice(2, 8),
    label: `Option ${Math.floor(Math.random() * 1000)}`,
  };
}

export default function DynamicSelectOptionsExample() {
  const [items, setItems] = useState([
    {value: '1', label: 'Option 1'},
    {value: '2', label: 'Option 2'},
    {value: '3', label: 'Option 3'},
  ]);

  function updateItems() {
    setItems([generateRandomOption(), generateRandomOption(), generateRandomOption()]);
  }

  return (
    <div className="d-flex">
      <CertaraSelect searchable options={items} renderOptionHtml={optionHtml} className="flex-1"></CertaraSelect>
      <CertaraButton onCertaraClick={updateItems} className="ml-2">
        update items
      </CertaraButton>
    </div>
  );
}

With unique key

Another possible, yet not recommended, way to render dynamic options is to use a key on the CertaraSelect component that changes whenever the options change. This forces react to unmount and remount the CertaraSelect component. Admittedly, this is not performant and should be avoided unless absolutely necessary.

DynamicSelectOptionsKey

import React, {useState} from 'react';
import {CertaraSelect, CertaraSelectOption, CertaraButton, CertaraBadge} from '@certara/certara-ui-react';

function generateRandomOption() {
  return {
    value: Math.random().toString(36).slice(2, 8),
    label: `Option ${Math.floor(Math.random() * 1000)}`,
  };
}

export default function DynamicSelectOptionsKeyExample() {
  const [items, setItems] = useState([
    {value: '1', label: 'Option 1'},
    {value: '2', label: 'Option 2'},
    {value: '3', label: 'Option 3'},
  ]);

  function updateItems() {
    setItems([generateRandomOption(), generateRandomOption(), generateRandomOption()]);
  }

  return (
    <div className="d-flex">
      <CertaraSelect key={items.map((item) => item.value).join(',')} searchable className="flex-1">
        {items.map((item) => (
          <CertaraSelectOption key={item.value} value={item.value}>
            {item.label} <CertaraBadge>value: {item.value}</CertaraBadge>
          </CertaraSelectOption>
        ))}
      </CertaraSelect>
      <CertaraButton onCertaraClick={updateItems} className="ml-2">
        update items
      </CertaraButton>
    </div>
  );
}

certara-select

Properties

ariaLabel

Attribute	aria-label
Type	string
Default	null
Required	false
Description	Accessible label for the select (use when not inside a form-group)

async

Attribute	async
Type	boolean
Default	false
Required	false
Description	Enable async loading mode

asyncConfig

Attribute	undefined
Type	SelectAsyncConfig
Default	undefined
Required	false
Description	Async configuration options

clearable

Attribute	clearable
Type	boolean
Default	true
Required	false
Description	Allow clearing the selection

closeOnSelect

Attribute	close-on-select
Type	boolean
Default	undefined
Required	false
Description	Close menu after selecting (default: true for single, false for multi)

creatable

Attribute	creatable
Type	boolean
Default	false
Required	false
Description	Allow creating new options

creatableConfig

Attribute	undefined
Type	SelectCreatableConfig
Default	undefined
Required	false
Description	Creatable configuration options

defaultValue

Attribute	default-value
Type	(string | number)[] | number | string
Default	null
Required	false
Description	Default value to restore on form reset

disabled

Attribute	disabled
Type	boolean
Default	false
Required	false
Description	Whether the control is disabled

error

Attribute	error
Type	string
Default	''
Required	false
Description	Error message to display

filterFn

Attribute	undefined
Type	(option: SelectOption<unknown>, query: string) => boolean
Default	undefined
Required	false
Description	Custom filter function

labelField

Attribute	label-field
Type	string
Default	'label'
Required	false
Description	Label field name if options are objects

loading

Attribute	loading
Type	boolean
Default	false
Required	false
Description	Show a loading indicator

maxMenuHeight

Attribute	max-menu-height
Type	number
Default	300
Required	false
Description	Maximum height of dropdown menu in pixels

menuPortalTarget

Attribute	menu-portal-target
Type	boolean | string
Default	undefined
Required	false
Description	Renders the dropdown menu into another DOM node. Selects the HTML element using its id. If the id can’t be found, defaults to the body.

menuWidth

Attribute	menu-width
Type	number
Default	undefined
Required	false
Description	Maximum width of the dropdown menu in pixels. Use this to allow the menu to be wider than the trigger. The minimum width is the width of the trigger.

minSearchChars

Attribute	min-search-chars
Type	number
Default	0
Required	false
Description	Minimum characters before filtering

multiple

Attribute	multiple
Type	boolean
Default	false
Required	false
Description	Enable multiple selection mode

name

Attribute	name
Type	string
Default	''
Required	false
Description	The name of the control for form submission

options

Attribute	undefined
Type	SelectOption<unknown>[] | SelectOptionGroup<unknown>[]
Default	[]
Required	false
Description	Options array - can be flat or grouped

placeholder

Attribute	placeholder
Type	string
Default	'Select...'
Required	false
Description	Placeholder text when no option is selected

placement

Attribute	placement
Type	"auto" | "bottom-end" | "bottom-start" | "top-end" | "top-start"
Default	'bottom-start'
Required	false
Description	Preferred dropdown placement

readonly

Attribute	readonly
Type	boolean
Default	false
Required	false
Description	Whether the control is read-only

renderOptionHtml

Attribute	undefined
Type	(option: SelectOption<unknown>) => string
Default	undefined
Required	false
Description	Custom render function for option HTML. This function should return a valid HTML string that will be injected into the select option. NOTE: this MUST be a plain string, not JSX.

required

Attribute	required
Type	boolean
Default	false
Required	false
Description	Whether the control is required for form validation

searchable

Attribute	searchable
Type	boolean
Default	false
Required	false
Description	Enable search/filtering

size

Attribute	size
Type	"lg" | "md" | "sm"
Default	'md'
Required	false
Description	Size variant of the control

value

Attribute	value
Type	(string | number)[] | number | string
Default	null
Required	false
Description	Current selected value(s)

valueField

Attribute	value-field
Type	string
Default	'value'
Required	false
Description	Value field name if options are objects

variant

Attribute	variant
Type	"default" | "link"
Default	'default'
Required	false
Description	Visual variant of the control

Events

Name	Description	Bubbles
certaraBlur	Emitted on blur	true
certaraChange	Emitted when the value changes	true
certaraClose	Emitted when the dropdown closes	false
certaraCreate	Emitted when a new option is created	true
certaraFocus	Emitted on focus	true
certaraFormControlError	Emitted for form control errors	true
certaraLoad	Emitted when async options should be loaded	true
certaraOpen	Emitted when the dropdown opens	true
certaraSearch	Emitted when the search query changes	true

Methods

Name	Signature	Description
addOption	(option: SelectOption) => Promise<void>	Adds an option to the list
clear	() => Promise<void>	Clears the current selection
close	() => Promise<void>	Closes the dropdown menu
open	() => Promise<void>	Opens the dropdown menu
removeOption	(value: string | number) => Promise<void>	Removes an option from the list
setBlur	() => Promise<void>	Removes focus from the control
setFocus	() => Promise<void>	Sets focus to the control
setValue	(value: SelectValue) => Promise<void>	Sets the value programmatically

Slots

Name	Description
	Default slot for declarative certara-select-option and certara-select-optgroup elements
no-options	Custom content when no options are available
prefix	Content to show before the selected value (e.g., an icon)

certara-select-option

A single option within a certara-select dropdown. Can be used declaratively or options can be passed programmatically.

Properties

data

Attribute	undefined
Type	{ [x: string]: unknown; }
Default	undefined
Required	false
Description	Arbitrary data to attach to this option.

disabled

Attribute	disabled
Type	boolean
Default	false
Required	false
Description	Whether this option is disabled and cannot be selected.

highlighted

Attribute	highlighted
Type	boolean
Default	false
Required	false
Description	Internal: Whether this option is currently highlighted via keyboard navigation.

html

Attribute	html
Type	string
Default	undefined
Required	false
Description	HTML content for rich option rendering (e.g., with badges). When provided, this is rendered instead of the label text.

label

Attribute	label
Type	string
Default	undefined
Required	false
Description	The display label for this option. If not provided, uses slot content.

selected

Attribute	selected
Type	boolean
Default	false
Required	false
Description	Internal: Whether this option is currently selected.

value

Attribute	value
Type	number | string
Default	undefined
Required	false
Description	The value of this option. Must be unique within the select.

Events

Name	Description	Bubbles
certaraOptionSelect	Emitted when this option is clicked/selected.	true

Methods

There are no public methods available for this component

Slots

Name	Description
	The label content for the option

certara-select-optgroup

A group of options within a certara-select dropdown. Provides a visual grouping with a label header.

Properties

disabled

Attribute	disabled
Type	boolean
Default	false
Required	false
Description	Whether all options in this group are disabled.

label

Attribute	label
Type	string
Default	undefined
Required	false
Description	The label displayed as the group header.

Events

There are no events available for this component

Methods

There are no public methods available for this component

Slots

Name	Description
	The option elements within this group