Chips

Chips are compact elements that represent an input, attribute, or action.

On this page

Specifications references
Accessibility
Variants
Extras
- Choice chips flow row
  - OdsChoiceChipsFlowRow API

Specifications references

Accessibility

Please follow accessibility criteria for development.

Chips support content labeling for accessibility and are readable by most screen readers, such as TalkBack. Text rendered in chips is automatically provided to accessibility services. Additional content labels are usually unnecessary.

Variants

Input chip

Input chips (referred to as entry chips in Android) represent a complex piece of information in compact form, such as an entity (person, place, or thing) or text. They enable user input and verify that input by converting text into chips.

Light input chip Dark input chip

Light outlined input chip Dark outlined input chip

Jetpack Compose

Use the OdsChip composable. Note that the chip style is outlined or filled according to your OdsTheme component configuration, outlined by default.

OdsChip(
    text = "chip text",
    onClick = {
        doSomething()
    },
    leading = OdsChip.LeadingAvatar(
        painterResource(id = R.drawable.avatar),
        "Avatar"
    ),
    enabled = true,
    onCancel = {
        doSomething()
    }
)

OdsChip API

Parameter	Default value	Description
`text: String`		Text to be displayed into the chip
`onClick: () -> Unit`		Callback called on chip click
`modifier: Modifier`	`Modifier`	`Modifier` to be applied to the chip
`enabled: Boolean`	`true`	Controls the enabled state of the chip. When `false`, this chip will not respond to user input.
`selected: Boolean`	`false`	Controls the selected state of the chip. When `true`, the chip is highlighted (useful for choice chips).
`leading: OdsChip.Leading?`	`null`	The leading content to be displayed at the start of the chip, preceding the text
`onCancel: (() -> Unit)?`	`null`	Callback called on chip cancel cross click. Pass `null` for no cancel cross.

Choice chip

Choice chips allow selection of a single chip from a set of options.

Choice chips clearly delineate and display options in a compact area. They are a good alternative to toggle buttons, radio buttons, and single select menus.

**Note: To display a set of choice chips please see Choice chips flow row **

Light choice chips Dark choice chips

Light outlined choice chips Dark outlined choice chips

Jetpack Compose

Use the OdsChip composable. Note that the chip style is outlined or filled according to your OdsTheme component configuration, outlined by default.

OdsChip(
    text = "chip text",
    onClick = {
        doSomething()
    },
    enabled = true,
)

Use the OdsChip API.

Filter chip

Filter chips use tags or descriptive words to filter content.

Filter chips clearly delineate and display options in a compact area. They are a good alternative to toggle buttons or checkboxes.

Light filter chips Dark filter chips

Light filter chips with avatar Dark filter chips with avatar

Jetpack Compose

Use the OdsFilterChip composable. Note that the chip style is outlined or filled according to your OdsTheme component configuration, outlined by default.

OdsFilterChip(
    text = "chip text",
    onClick = {
        doSomething()
    },
    leadingAvatar = OdsChip.LeadingAvatar(
        painterResource(id = R.drawable.avatar),
        ""
    ), // Set it to `null` for no avatar
    selected = false,
    enabled = true,
)

OdsFilterChip API

Parameter	Default value	Description
`text: String`		Text to be displayed into the chip
`onClick: () -> Unit`		Callback called on chip click
`modifier: Modifier`	`Modifier`	`Modifier` to be applied to the chip
`enabled: Boolean`	`true`	Controls the enabled state of the chip. When `false`, this chip will not respond to user input. It also appears visually disabled and is disabled to accessibility services.
`selected: Boolean`	`false`	Controls the selected state of the chip. When `true`, the chip is highlighted.
`leadingAvatar: OdsChip.LeadingAvatar?`	`null`	Avatar to be displayed in a circle shape at the start of the chip, preceding the content text

Action chip

Action chips offer actions related to primary content. They should appear dynamically and contextually in a UI.

An alternative to action chips are buttons, which should appear persistently and consistently.

Light action chip Dark action chip

Light outlined action chip Dark outlined action chip

Jetpack Compose

Use the OdsChip composable. Note that the chip style is outlined or filled according to your OdsTheme component configuration, outlined by default.

OdsChip(
    text = "chip text",
    onClick = {
        doSomething()
    },
    leading = OdsChip.LeadingIcon(
        painterResource(id = R.drawable.ic_heart),
        "Heart"
    ), // set it to `null` for no icon
    enabled = true,
)

Use the OdsChip API.

Extras

The ODS library provides some chips related components to facilitate the implementation of chips groups.

Choice chips flow row

This is a full width FlowRow containing selectable chips. It works like radio buttons, only one chip of the set can be selected.

Light choice chips flow row

Dark choice chips flow row

Use OdsChoiceChipsFlowRow composable. Note that the chips style is outlined or filled according to your OdsTheme component configuration, outlined by default.

OdsChoiceChipsFlowRow(
    selectedChoiceChipIndex = selectedChoiceChipIndex,
    choiceChips = listOf(
        OdsChoiceChipsFlowRow.ChoiceChip("Choice chip 1", { selectedChoiceChipIndex = 0 }),
        OdsChoiceChipsFlowRow.ChoiceChip("Choice chip 2", { selectedChoiceChipIndex = 1 })
    ),
    modifier = Modifier.padding(horizontal = dimensionResource(id = com.orange.ods.R.dimen.spacing_m))
)

OdsChoiceChipsFlowRow API

Parameter	Default value	Description
`selectedChoiceChipIndex: Int`		The index of the currently selected chip.
`choiceChips: List<OdsChoiceChipsFlowRow.ChoiceChip>`		The list of `OdsChoiceChipsFlowRow.ChoiceChip` displayed into the chips flow row.
`modifier: Modifier`	`Modifier`	`Modifier` applied to the chips flow row.