Switch

Custom switch component with optional label, caption, and error support.
Supports different positions, sizes, statuses, default values, and full styling.

Usage Playground

Position

left

right

Adjacent

Default Value

Color

Label

Caption

Error

Size

small

medium

large

Disabled

Code Snippet

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

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

Usage

Enable Awesome Feature

function SwitchUsage() {
  return (
    <View>
      <Switch label="Enable Awesome Feature" />
    </View>
  )
}

Positions

Use label & position prop to control whether the label appears on the left or right of the switch.

Left Position

Left Position caption

Right Position

Right Position caption

Left Adjacent Position

Left Adjacent Position caption

Right Adjacent Position

Right Adjacent Position caption

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

Status

primary

accent

success

info

warning

error

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

Size

small

medium

large

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

Disabled

Use disabled prop to make the switch non-interactive.

Disabled

Disabled

Disabled

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

Default Value

Use defaultValue to set the initial state of the switch.

function SwitchDefaultValue() {
  return (
    <View>
      <Switch defaultValue />
    </View>
  )
}

Custom

Demonstrates fully customized switches with custom colors, sizes, and label positioning.

Agree to T&C

Click here to see Privacy Policy

function SwitchCustom() {
  const [isOn, setIsOn] = useState(true)

  return (
    <View>
      <Switch
        label="Agree to T&C"
        caption="Click here to see Privacy Policy"
        color="green"
        size="large"
        adjacent={false}
        value={isOn}
        onValueChange={setIsOn}
        error={isOn ? '' : 'Please Agree to T&C to continue'}
        containerStyle={styles.container}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    marginVertical: 4,
  },
  label: {
    marginEnd: 8,
  },
})

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'