TextField

Default

Day	Night

Error

Day	Night

Validated

Day	Night

Disabled

Day	Night

TextArea

Day	Night

TextArea Error

Day	Night

TextArea Validated

Day	Night

TextArea Disabled

Day	Night

Installation

Backpack Compose is available through Maven Central. Check the main Readme for a complete installation guide.

Usage

Note: If TextField is used inside BpkFieldSet it will inherit its default status from BpkFieldSet.

Example of a TextField:

                                                
                                                import net.skyscanner.backpack.compose.textfield.BpkTextField
                                                
                                                BpkTextField(
                                                  value = value,
                                                  onValueChange = { value -> },
                                                  placeholder = "Placeholder",
                                                )

Example of a TextField with leading icon:

                                                
                                                import net.skyscanner.backpack.compose.icon.BpkIcon
                                                import net.skyscanner.backpack.compose.textfield.BpkTextField
                                                import net.skyscanner.backpack.compose.tokens.Accessibility
                                                
                                                BpkTextField(
                                                  value = value,
                                                  onValueChange = { value -> },
                                                  placeholder = "Placeholder",
                                                  icon = BpkIcon.Accessibility,
                                                )

Example of a TextField with clear action:

                                                
                                                import net.skyscanner.backpack.compose.icon.BpkIcon
                                                import net.skyscanner.backpack.compose.textfield.BpkTextField
                                                import net.skyscanner.backpack.compose.textfield.BpkClearAction
                                                import net.skyscanner.backpack.compose.tokens.Accessibility
                                                
                                                BpkTextField(
                                                  value = value,
                                                  onValueChange = { value -> },
                                                  placeholder = "Placeholder",
                                                  icon = BpkIcon.Accessibility,
                                                  clearAction = BpkClearAction("Clear"){ value = "" }
                                                )

Example of a multiline TextField:

                                                
                                                import net.skyscanner.backpack.compose.textfield.BpkTextField
                                                
                                                BpkTextField(
                                                  value = value,
                                                  onValueChange = { value -> },
                                                  placeholder = "Placeholder",
                                                  maxLines = 3,
                                                )

Example of a TextField with error status:

                                                
                                                import net.skyscanner.backpack.compose.fieldset.BpkFieldStatus
                                                import net.skyscanner.backpack.compose.textfield.BpkTextField
                                                
                                                BpkTextField(
                                                  value = value,
                                                  onValueChange = { value -> },
                                                  placeholder = "Placeholder",
                                                  status = BpkFieldStatus.Error("Error text"),
                                                )

Example of a TextArea:

                                                
                                                import net.skyscanner.backpack.compose.textfield.BpkTextArea
                                                
                                                BpkTextArea(
                                                  value = value,
                                                  onValueChange = { value -> },
                                                  placeholder = "Placeholder",
                                                )

Example of a TextArea with error status:

                                                
                                                import net.skyscanner.backpack.compose.fieldset.BpkFieldStatus
                                                import net.skyscanner.backpack.compose.textfield.BpkTextArea
                                                
                                                BpkTextArea(
                                                  value = value,
                                                  onValueChange = { value -> },
                                                  placeholder = "Placeholder",
                                                  status = BpkFieldStatus.Error("Error text"),
                                                )