Skip to main content

Chips

The TkChip component is basically a simple UI block entity, representing for example more advanced underlying data, such as a contact, in a compact way. Chips can contain entities such as an avatar, text or an icon, optionally having a pointer too.

import { TkChips } from '@takeoff-ui/react'

Playground​

Preview

Generated Code

<TkChips
  variant="primary"
  type="filled"
  size="base"
  label="Chip Label"
  iconPosition="left"
  autoSelfDestroy
/>
<TkChips
  variant="primary"
  type="filled"
  size="base"
  label="Chip Label"
  iconPosition="left"
  :autoSelfDestroy.prop="true"
/>
<tk-chips
  variant="primary"
  type="filled"
  size="base"
  label="Chip Label"
  iconPosition="left"
  [autoSelfDestroy]="true"
/>

Controls

Variant​

The variant of the chips for styling.

View Code
<TkChips variant="primary" label="primary" removable />
<TkChips variant="secondary" label="secondary" removable />
<TkChips variant="neutral" label="neutral" removable />
<TkChips variant="info" label="info" removable />
<TkChips variant="warning" label="warning" removable />
<TkChips variant="success" label="success" removable />
<TkChips variant="danger" label="danger" removable />
<TkChips variant="verified" label="verified" removable />

Type​

This field specifies the design type of the component. "filled", "filledlight", "outlined" designs are available

View Code
<TkChips variant="primary" type="filled" label="primary" />
<TkChips variant="primary" type="filledlight" label="primary" />
<TkChips variant="primary" type="outlined" label="primary" />

Size​

The "size" prop can be used with one of the sizes "small", "base", and "large". The default value is "base".

View Code
<TkChips variant="primary" size="small" label="primary" removable />
<TkChips variant="primary" size="base" label="primary" removable />
<TkChips variant="primary" size="large" label="primary" removable />

Icon​

This example illustrates how to use an icon with chips.

String Usage - Single

Icon Options Usage - Single

String Icon Usage - Multiple

Icon Options Usage - Multiple

View Code
<TkChips variant="primary" size="large" icon="flight" label="Left Icon" />
<TkChips variant="primary" size="large" icon="flight" label="Right Icon" iconPosition="right" />

<TkChips variant="primary" size="large" icon={{ name: 'home', color: 'red', fill: true } as IIconOptions} label="Left Icon" />
<TkChips variant="primary" size="large" icon={{ name: 'home', color: 'red', fill: true } as IIconOptions} label="Right Icon" iconPosition="right" />

<TkChips
  variant="primary"
  size="large"
  label="Multiple Icon"
  icon={
    {
      left: 'key',
      right: 'check_circle',
    } as IMultiIconOptions
  }
/>
<TkChips
  variant="primary"
  size="large"
  label="Multiple Icon"
  icon={
    {
      left: { name: 'key', color: 'var(--blue-500)' } as IIconOptions,
      right: { name: 'check_circle', color: 'var(--green-600)', fill: true } as IIconOptions,
    } as IMultiIconOptions
  }
/>

FullWidth​

The fullWidth prop makes the chips component expand to the full width of its container.

View Code
<div className="flex gap-2">
    <TkChips fullwidth label="A" />
    <TkChips fullwidth label="AA" />
    <TkChips fullwidth label="AAA" />
</div>

API​

Props​

NameTypeDefaultDescription
booleantrueDetermines whether the chip automatically removes itself when the close button is clicked.
CSSStylePropertiesnullCustom style to apply to the chip component.
stringnullSets the data-testid attribute on the root container element.
booleanfalseThe disabled status.
booleanfalseMarks the chip as the one holding the keyboard inside a chips input, e.g. while the arrow keys walk them.
booleanfalseIf true, the chip will take the full width of its container.
IIconOptions, IMultiIconOptions, stringnullSpecifies a material icon name to be displayed.
"left", "right"'left'The position of the icon relative to the label.
stringnullThe label to display inside the chip.
booleanfalseThis property determines whether the chip component is removable.
"base", "large", "small"'base'Sets size for the component.
"avatar", "filled", "filledlight", "outlined"'filled'This field specifies the design type of the component.
anynullThe value of the chips
"danger", "info", "neutral", "primary", "secondary", "success", "verified", "warning"'primary'The variant of the chip for styling.

Events​

NameDescription
tk-removeWhen an element is deleted, it is triggered. It returns the label.

Interfaces​

IChipOptions​

interface IChipOptions {
  icon?: string | IIconOptions;
  iconPosition?: 'left' | 'right';
  type?: 'filled' | 'filledlight' | 'outlined' | 'avatar';
  size?: 'large' | 'base' | 'small';
  variant?:
    | 'primary'
    | 'secondary'
    | 'neutral'
    | 'info'
    | 'success'
    | 'danger'
    | 'warning'
    | 'verified';
  containerStyle?: CSSStyleProperties;
}