Import
View-based framework
Before you can use components from the Backbase Design System SDK, make sure you've installed the package and import it at the top of your file.
import com.backbase.android.design.button.BackbaseRadioButton
Usage
Basic usage
Create a BackbaseRadioButton to provide radio button functionality with additional error state support.
val radioButton = BackbaseRadioButton(context)
radioButton.text = "Option 1"
radioButton.error = false
XML usage
Use BackbaseRadioButton in XML layouts with custom attributes for error state configuration.
<com.backbase.android.design.button.BackbaseRadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Select this option"
app:state_error="false" />
Configuration
|
Parameter |
Type |
Default |
|---|---|---|
|
error |
Boolean |
false |
error
The error parameter controls the error state of the radio button. When set to true, the radio button displays error styling and automatically becomes unchecked.
radioButton.error = true
Error state behavior
Automatic unchecking
When the error state is set to true, the radio button automatically becomes unchecked.
radioButton.isChecked = true
radioButton.error = true // This will set isChecked to false
Error state styling
The error state affects the visual appearance through drawable state changes, allowing custom styling for error conditions.
// Set error state
radioButton.error = true
// Clear error state
radioButton.error = false
Styling
Error state selectors
Use state selectors in drawable resources to define different appearances for the error state:
<selector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:color="@color/neutral_70"
android:state_checked="true"
android:state_enabled="false"/>
<item android:color="?colorDanger"
app:state_error="true" />
<item android:color="?colorInfo"
android:state_checked="true" />
<item android:color="@color/neutral_40"
android:state_enabled="false" />
<item android:color="@color/neutral_70" />
</selector>
Default styling
The component uses Material Design styling with Backbase design system customizations:
<style name="Widget.Backbase.RadioButton"
parent="Widget.MaterialComponents.CompoundButton.RadioButton">
<item name="buttonTint">@drawable/backbase_component_radiobutton_selector</item>
<item name="android:textColor">@color/bds_selector_input_text</item>
<item name="android:textAppearance">?textAppearanceSubtitle1</item>
</style>
Design tokens
The BackbaseRadioButton component uses design tokens for consistent styling:
- Colors: Error state uses colorDanger semantic token
- Typography: Text appearance follows textAppearanceSubtitle1 design token
- States: Supports standard Material states plus custom error state
- Spacing: Inherits Material Design radio button spacing and touch targets
// Error state uses design system danger color
radioButton.error = true // Applies colorDanger styling automatically