Biofarma | Bind UI

Radio

Radios are used when only one option can be selected.

Type	Resource
Design	Figma
Web	Web Storybook
Code	Gitlab

First

Second

Usage

import { RadioButton } from 'bio-bind-ui';

<RadioButton
  id=''
  label='Label'
  labelPosition='right'
  mode='light'
  name='radio'
  onChange={() => {}}
  size='md'
  style={{}}
  variant='primary'
/>

Examples

Radio Variant

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

Primary

Secondary

Radio Size

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

Radio sm

Radio MD

Radio LG

Label Position (optional)

Use labelPosition to set label right or left

Radio Label on Right

Radio Label on Left

Mode (optional) Use mode to use `dark` or `light`

Radio Light Mode

Radio Dark Mode

Props

Props	Required	Default	Type	description
label	true	-	`string`	The label text for the radio.
labelPosition	false	`right`	`left` `right`	The label position to the radio.
style	false	-	`CSSProperties`	Custom styles for the radio component.
mode	false	`light`	`light` `dark`	The theme mode of the radio (`light` or `dark`).
id	false	-	`string`	A unique identifier for the radio.
name	false	-	`string`	Name 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.
disabled	false	`false`	`true` `false`	If true, radio will be set to disabled state
checked	false	`false`	`true` `false`	If true, radio will be set to checked state.
isError	false	`false`	`true` `false`	If true, radio will be set to error state.
onChange	false	-	`(event: React.ChangeEvent<HTMLInputElement>) => void`	Callback function to handle when the value of a radio button changes.

Pin Input Select