Validation & Limits

Input validation

Return null from onCreateChip to reject input:

val emailRegex = Regex("^[A-Za-z0-9+_.-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,}$")

ChipTextField(
    state = state,
    onCreateChip = { text ->
        text.trim().takeIf { emailRegex.matches(it) }
    },
)

When onCreateChip returns null, the text stays in the input field — the user can edit and retry.

Max chips

Limit the number of chips. The input field hides when the limit is reached:

ChipTextField(
    state = state,
    onCreateChip = { it },
    maxChips = 5,
)

Custom delimiters

By default, chips are created on , and \n (Enter). Customize with delimiters:

ChipTextField(
    state = state,
    onCreateChip = { it },
    delimiters = setOf(',', '\n', ' ', ';'),
)

This is useful for email inputs where space should also create a chip.

Read-only mode

Display chips without allowing edits:

ChipTextField(
    state = state,
    onCreateChip = { it },
    readOnly = true, // chips visible but not editable
)

Disabled state

Fully disable the field:

ChipTextField(
    state = state,
    onCreateChip = { it },
    enabled = false, // grayed out, no interaction
)

Removal callback

React when a chip is removed (e.g., for analytics or syncing state):

ChipTextField(
    state = state,
    onCreateChip = { it },
    onChipRemoved = { chip ->
        println("Removed: $chip")
    },
)