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

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>
  )
}

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	SwitchProps$1	--	Inherits properties from SwitchProps$1
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
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
labelStyle	StyleProp<TextStyle>	--	Label text style
captionStyle	StyleProp<TextStyle>	--	Caption text style
errorStyle	StyleProp<TextStyle>	--	Error text style
status	BlossomStatus	primary	--
size	BlossomSize	medium	--