Biofarma | Bind UI

Radio Button

A radio button permits users to select only one option from a list of two or more.

Type	Resource
Design	Figma
Mobile	Mobile Storybook
Code	Gitlab

Radio Preview

Usage

To implement Radio, you can use this tag Radio in the Kotlin file.

import id.co.biofarma.binduiandroid.components.radio.RadioButton

    var selectedId by remember { mutableStateOf(if (selected) "option1" else "") }
    Radio(
        id = "option1",
        variant = "primary",
        label = "label",
        size = "sm",
        enabled = "true",
        error = "false",
        selected = selectedId == "option1",
        onChange = {
            selectedId = if (selectedId == "option1") "" else "option1"
        }
    )

Examples

Variant

Set the variant prop to primary or secondary for different color.

Radio Preview

Size

Set the size prop to sm, md, or lg for different size.

Alert Preview

Disabled (optional)

Set the enabled prop to true or false.

Alert Preview

Error (optional)

Set the error prop to true or false

Alert Preview

Props

Props	Required	Default	Type	description
label	true	-	`string`	The label text for the radio.
id	false	-	`string`	A unique identifier for the radio.
variant	false	`primary`	`primary` `secondary`	The visual color variant of the radio.
size	false	`md`	`sm` `md` `lg`	The size of radio.
enabled	false	`false`	`true` `false`	If false, radio will be set to disabled state
selected	false	`false`	`true` `false`	If true, radio will be set to checked state.
error	false	`false`	`true` `false`	If true, radio will be set to error state.
onChange	false	-	`function`	Callback function to run when the radio is clicked.
style	false	-	`Modifier`	To decorate or add behavior to Compose UI elements.

Pin Input Search