Switch Stable WINMACLNX

A toggle switch — the mobile-native on/off control. Useful for settings that take effect immediately without needing a Save button.

Import

import { Switch } from 'veloxkit'

Basic usage

const [enabled, setEnabled] = useState(false)
 
<Switch value={enabled} onValueChange={setEnabled} />

Props

Prop	Type	Default	Description
`value`	`boolean`	`false`	Current on/off state
`onValueChange`	`(value: boolean) => void`	—	Called with the new state on press
`disabled`	`boolean`	`false`	Prevents interaction and grays out the control
`style`	`ViewStyle`	—	Outer container style override

Examples

Settings panel

const [settings, setSettings] = useState({
  darkMode:  false,
  wifi:      true,
  bluetooth: false,
})
 
function SettingRow({ label, value, onValueChange }) {
  return (
    <View style={{
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      paddingVertical: 14,
      paddingHorizontal: 16,
      borderBottomWidth: 1,
      borderColor: '#2a2a3e',
    }}>
      <Text style={{ fontSize: 15 }}>{label}</Text>
      <Switch value={value} onValueChange={onValueChange} />
    </View>
  )
}
 
return (
  <View>
    <SettingRow
      label="Dark mode"
      value={settings.darkMode}
      onValueChange={v => setSettings(s => ({ ...s, darkMode: v }))}
    />
    <SettingRow
      label="Wi-Fi"
      value={settings.wifi}
      onValueChange={v => setSettings(s => ({ ...s, wifi: v }))}
    />
    <SettingRow
      label="Bluetooth"
      value={settings.bluetooth}
      onValueChange={v => setSettings(s => ({ ...s, bluetooth: v }))}
    />
  </View>
)

With label and description

<View style={{ flexDirection: 'row', gap: 12, alignItems: 'flex-start' }}>
  <View style={{ flex: 1 }}>
    <Text style={{ fontSize: 15, fontWeight: '500' }}>Crash reporting</Text>
    <Text style={{ fontSize: 13, color: '#9999bb', marginTop: 2 }}>
      Anonymously send crash reports to help improve VeloxKit.
    </Text>
  </View>
  <Switch value={crashEnabled} onValueChange={setCrashEnabled} />
</View>

Checkbox Radio