spark/com.adevinta.spark.components.chips

Package-level declarations

Chips help users quickly recognize an important information that has been entered by them, trigger actions, make selections, or filter content.


Light
Dark

Most commonly chip contains an optional leadingIcon and the text.

Styles

The chip can have one of the ChipStyles.kt:

ChipOutlined.kt - using a solid border stroke and no background
ChipTinted.kt - using one of the "containers" colors
ChipDashed.kt - using a dashed border and no background

The color is set using one of the ChipIntent.kts:

Basic (default color)
Accent
Main
Support
Success
Alert
Danger
Info
Neutral
Surface


Outlined
Tinted
Dashed

To draw a chip with an optional leading icon and text.

ChipOutlined(
    text = "default chip",
    leadingIcon = SparkIcons.CalendarOutline,
    onClick = {},
)

To pass a custom content:

ChipSelectable(
    onClick = {},
) {
    Text(text = "Animals")
    Icon(
        sparkIcon = SparkIcons.ArrowHorizontalUp,
        modifier = Modifier.size(12.dp),
        contentDescription = null,
        tint = LocalContentColor.current,
    )
}

Handling selection

Chips support selection with the ChipSelectable Variant.

Single selection

You'll need to add the selectableGroup modifier to the parent container of the chips.

and specify the Role.RadioButton semantics for each chip to indicate that only one of the chip can be selected at a time.

fun Modifier.semantics {
    this.role = Role.RadioButton
}

val filters by remember {
    mutableStateOf(
        persistentListOf("Fruit","Vegetable"),
    )
}
var singleSelected by remember { mutableStateOf("Fruit") }
FlowRow(
    horizontalArrangement = spacedBy(8.dp),
    modifier = Modifier.selectableGroup()
) {
    filters.forEach { filter ->
        ChipSelectable(
            modifier = Modifier.semantics {
                role = Role.RadioButton
            },
            text = filter,
            selected = singleSelected == filter,
            onClick = { singleSelected = filter },
        )
    }
}

Multiple selection

val filters by remember {
    mutableStateOf(
        persistentListOf("Animal","Flower","Tree")
    )
}
var selectedFilters by remember { mutableStateOf(listOf("Animal", "Tree")) }
FlowRow(
    horizontalArrangement = spacedBy(8.dp),
) {
    filters.forEach { filter ->
        val selected = filter in selectedFilters
        ChipSelectable(
            text = filter.name,
            selected = selected,
            leadingIcon = if (selected) SparkIcons.Check else null,
            onClick = {
                unionSelected = if (selected) {
                    selectedFilters - filter
                } else {
                    selectedFilters + filter
                }
            },
        )
    }
}

Types

ChipDefaults

object ChipDefaults

ChipIntent

enum ChipIntent : Enum<ChipIntent>

ChipIntent is used to define the intent of the chip.

ChipStyles

enum ChipStyles : Enum<ChipStyles>

Functions

border

@Composable

fun ChipStyles.border(intent: ChipIntent, enabled: Boolean): BorderStroke?

Chip

@Composable

fun Chip(onClick: () -> Unit, modifier: Modifier = Modifier, onClose: () -> Unit? = null, onCloseLabel: String? = null, intent: ChipIntent = ChipIntent.Basic, style: ChipStyles = ChipStyles.Outlined, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, content: @Composable RowScope.() -> Unit?)

@Composable

fun Chip(onClick: () -> Unit, text: String?, modifier: Modifier = Modifier, onClose: () -> Unit? = null, onCloseLabel: String? = null, intent: ChipIntent = ChipIntent.Basic, style: ChipStyles = ChipStyles.Outlined, enabled: Boolean = true, leadingIcon: SparkIcon? = null, contentDescription: String? = null, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() })

Chips help users quickly recognize an important information that has been entered by them, trigger actions, make selections, or filter content.

ChipDashed

@Composable

fun ChipDashed(icon: SparkIcon, contentDescription: String, modifier: Modifier = Modifier, intent: ChipIntent = ChipIntent.Basic, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onClick: () -> Unit = {})

@Composable

fun ChipDashed(modifier: Modifier = Modifier, intent: ChipIntent = ChipIntent.Basic, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onClick: () -> Unit = {}, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, content: @Composable RowScope.() -> Unit)

Outlined chip with dashed border.

@Composable

fun ChipDashed(text: String, modifier: Modifier = Modifier, intent: ChipIntent = ChipIntent.Basic, enabled: Boolean = true, leadingIcon: SparkIcon? = null, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onClick: () -> Unit = {})

Outlined chip with dashed border

ChipOutlined

@Composable

fun ChipOutlined(icon: SparkIcon, contentDescription: String, modifier: Modifier = Modifier, intent: ChipIntent = ChipIntent.Basic, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onClick: () -> Unit = {})

@Composable

fun ChipOutlined(text: String, modifier: Modifier = Modifier, intent: ChipIntent = ChipIntent.Basic, enabled: Boolean = true, leadingIcon: SparkIcon? = null, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onClick: () -> Unit = {})

@Composable

fun ChipOutlined(modifier: Modifier = Modifier, intent: ChipIntent = ChipIntent.Basic, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onClick: () -> Unit = {}, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, content: @Composable RowScope.() -> Unit)

A chip with no background but having a border

ChipSelectable

@Composable

fun ChipSelectable(selected: Boolean, onClick: () -> Unit, modifier: Modifier = Modifier, onClose: () -> Unit? = null, onCloseLabel: String? = null, intent: ChipIntent = ChipIntent.Basic, style: ChipStyles = ChipStyles.Outlined, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, content: @Composable RowScope.() -> Unit?)

@Composable

fun ChipSelectable(selected: Boolean, onClick: () -> Unit, text: String?, modifier: Modifier = Modifier, onClose: () -> Unit? = null, onCloseLabel: String? = null, intent: ChipIntent = ChipIntent.Basic, style: ChipStyles = ChipStyles.Outlined, enabled: Boolean = true, leadingIcon: SparkIcon? = null, contentDescription: String? = null, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() })

Chips help users quickly recognize an important information that has been entered by them, trigger actions, make selections, or filter content.

ChipTinted

@Composable

fun ChipTinted(icon: SparkIcon, contentDescription: String, modifier: Modifier = Modifier, intent: ChipIntent = ChipIntent.Basic, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onClick: () -> Unit = {})

@Composable

fun ChipTinted(text: String, modifier: Modifier = Modifier, intent: ChipIntent = ChipIntent.Basic, enabled: Boolean = true, leadingIcon: SparkIcon? = null, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onClick: () -> Unit = {})

@Composable

fun ChipTinted(modifier: Modifier = Modifier, intent: ChipIntent = ChipIntent.Basic, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onClick: () -> Unit = {}, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, content: @Composable RowScope.() -> Unit)

A chip with lighter background and no border