Select

Show design guidelines

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>

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>

certara-select

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

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

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

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

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	true
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.

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