Radio

Component for selecting a single option. Supports custom sizes, statuses, positions, default values, and full styling customization.

Usage Playground

Position

left

right

Adjacent

Default Value

Color

Label

Caption

Error

Size

small

medium

large

Disabled

Code Snippet

import { Radio } from "@react-native-blossom-ui/components";

    function Usage() {
        return (
            <Radio/>
        );
    }

Usage

Enable Awesome Feature

function RadioUsage() {
  const [isOn, setIsOn] = useState(false)

  return (
    <View>
      <Radio
        label="Enable Awesome Feature"
        value={isOn}
        onValueChange={setIsOn}
      />
    </View>
  )
}

Status

primary

accent

success

info

warning

error

function RadioStatuses() {
  return (
    <View style={{justifyContent: 'space-evenly'}}>
      <Radio
        status="primary"
        label="primary"
        containerStyle={styles.container}
      />
      <Radio status="accent" label="accent" containerStyle={styles.container} />
      <Radio
        status="success"
        label="success"
        containerStyle={styles.container}
      />
      <Radio status="info" label="info" containerStyle={styles.container} />
      <Radio
        status="warning"
        label="warning"
        containerStyle={styles.container}
      />
      <Radio status="error" label="error" containerStyle={styles.container} />
    </View>
  )
}

Size

small

medium

large

function RadioSizes() {
  return (
    <View row style={{justifyContent: 'space-evenly'}}>
      <Radio label="small" size="small" />
      <Radio label="medium" size="medium" />
      <Radio label="large" size="large" />
    </View>
  )
}

Disabled

Use the disabled prop to make radio buttons non-interactive.

󰐽

Disabled

󰐽

Disabled

󰐽

Disabled

function RadioDisabled() {
  return (
    <View row style={{justifyContent: 'space-evenly'}}>
      <Radio label="Disabled" disabled />
      <Radio label="Disabled" value status="primary" disabled />
      <Radio label="Disabled" size="large" disabled />
    </View>
  )
}

Positions

Use the position & adjacent prop together to place the label on the left or right of the radio button & spacing between them.

Left Adjacent Position

Right Adjacent Position

Right Adjacent Position

Right Adjacent Position

Left Position

Right Adjacent Position

Right Position

Right Adjacent Position

function RadioPositions() {
  return (
    <View>
      <Radio
        label="Left Adjacent Position"
        caption="Right Adjacent Position"
        containerStyle={styles.container}
      />
      <Radio
        label="Right Adjacent Position"
        caption="Right Adjacent Position"
        position="right"
        containerStyle={styles.container}
      />
      <Radio
        caption="Right Adjacent Position"
        label="Left Position"
        adjacent={false}
        containerStyle={styles.container}
      />
      <Radio
        caption="Right Adjacent Position"
        label="Right Position"
        position="right"
        adjacent={false}
        containerStyle={styles.container}
      />
    </View>
  )
}

Default Value

Use defaultValue to preselect a radio button when the component mounts.

󰐾

function RadioDefaultValue() {
  return (
    <View>
      <Radio defaultValue />
    </View>
  )
}

Custom

Agree to T&C

Click here to see Privacy Policy

Please Agree to T&C to continue

Centered color Radio

Props

Prop	Data Type	Default Value	Description
Extends	RNSwitchProps	--	Inherits properties from RNSwitchProps
position	"left" | "right"	right	Control the position of the field
adjacent	boolean	true	Set it to false to position them apart i.e. space-between
defaultValue	boolean	false	Default value for the field
color	ColorValue	--	Set custom color
label	string	--	Label text above the input
caption	string	--	Caption text below the text input
error	string	--	Error text in error `status` below caption text
containerStyle	StyleProp<ViewStyle>	--	Container view style
textFieldsContainerStyle	StyleProp<ViewStyle>	--	Text field Container view styleContainer for label, caption & error i.e. the right/left section opposite to the boolean field
labelStyle	StyleProp<TextStyle>	--	Label text style
captionStyle	StyleProp<TextStyle>	--	Caption text style
errorStyle	StyleProp<TextStyle>	--	Error text style
status	BlossomStatus	primary	Status of the component to apply color variants'primary' | 'accent' | 'success' | 'info' | 'warning' | 'error'
size	BlossomSize	medium	Size of the component'small' | 'medium' | 'large'