Radio

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

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	string	--	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'