Editable, customizable text fields with chips, supporting various styles like filled, outlined, and underlined. Additional features include checkable and avatar chips, enhancing user interaction and visual appeal.
Editable and customizable chips for Compose Multiplatform. Available on these platforms:
iOS support is currently lacking, see #131.
Gradle dependency:
// Material 2
implementation "io.github.dokar3:chiptextfield:latest_version"
// Material 3
implementation "io.github.dokar3:chiptextfield-m3:latest_version"
Default (filled style)
var value by remember { mutableStateOf("Initial text") }
val state = rememberChipTextFieldState<Chip>()
ChipTextField(
state = state,
value = value,
onValueChange = { value = it },
onSubmit = { text -> Chip(text) },
)
Simplified version if do not care about the text field value:
val state = rememberChipTextFieldState<Chip>()
ChipTextField(
state = state,
onSubmit = ::Chip,
)
Outlined
val state = rememberChipTextFieldState<Chip>()
OutlinedChipTextField(
state = state,
onSubmit = ::Chip,
)
Need a classic underline style?
val state = rememberChipTextFieldState<Chip>()
ChipTextField(
state = state,
onSubmit = ::Chip,
colors = TextFieldDefaults.textFieldColors(
backgroundColor = Color.Transparent,
),
contentPadding = PaddingValues(bottom = 8.dp),
)
Checkable chips
class CheckableChip(text: String, isChecked: Boolean = ) : Chip(text) {
isChecked mutableStateOf(isChecked)
}
state = rememberChipTextFieldState(
chips = listOf(CheckableChip(), ),
)
BasicChipTextField(
state = state,
onSubmit = { },
readOnly = ,
chipLeadingIcon = { chip -> CheckIcon(chip) },
chipTrailingIcon = {},
onChipClick = { chip -> chip.isChecked = !chip.isChecked }
)
{ }
Avatar chips
class AvatarChip(text: String, val avatarUrl: String) : Chip(text)
val state = rememberChipTextFieldState<AvatarChip>()
ChipTextField(
state = state,
onSubmit = { AvatarChip(it.text, AVATAR_URL) },
chipLeadingIcon = { chip -> Avatar(chip) } // Load and display avatar
)
@Composable
fun Avatar(chip: AvatarChip, modifier: Modifier = Modifier) { /*...*/ }
Material 3
- import com.dokar.chiptextfield.OutlinedChipTextField
+ import com.dokar.chiptextfield.m3.OutlinedChipTextField
Copyright 2021 dokar3
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http:
Unless applicable law agreed to writing, software
distributed under the License distributed an BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express implied.
See the License the specific language governing permissions
limitations under the License.
Surfaced from shared tags and platforms — no rankings paid for.