Chip

Design guidelines

Chips are a compact way to represent items such as users or entities that have been included in a setting or feature. They can be shown as part of a collection and are added/removed inline.

Chips are used in conjunction with the form Select component. View component

Code

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-chip label="Chip"></certara-chip>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-chip label="Chip" disabled></certara-chip>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-chip label="Chip" readonly></certara-chip>

Properties

`disabled`


Attribute	`disabled`
Type	`boolean`
Default	`false`
Required	`false`
Description	Disable the chip while true - removing the remove button

`label`


Attribute	`label`
Type	`string`
Default	`undefined`
Required	`false`
Description	The text to display within the chip

`readOnly`


Attribute	`read-only`
Type	`boolean`
Default	`undefined`
Required	`false`
Description	DEPRECATED. Use `readonly` instead. Will be removed in the next major version.

`readonly`


Attribute	`readonly`
Type	`boolean`
Default	`undefined`
Required	`false`
Description	Makes the chip read-only, hiding the remove button

Events

Name	Description	Bubbles
`certaraClick`	Called when the remove button is clicked	`true`

Methods

There are no public methods available for this component

Slots

There are no slots available for this component