Switch

Implement user-friendly switches with Bramble UI's switch component. Create intuitive web interfaces and enhance user interactions with modern switches.

Usage

Default

import {Switch} from '@/ui'
				
<Switch
	label='I agree to terms and conditions'
	name='terms'
	required={true}
/>

Square

import {Switch} from '@/ui'
				
<Switch
	label='I agree to terms and conditions'
	name='terms'
	required={true}
	round={false}
	switchColor='danger'
/>

Thin

import {Switch} from '@/ui'
				
<Switch
	label='I agree to terms and conditions'
	name='terms'
	className='thin'
	required={true}
/>
				
<Switch
	label='I agree to terms and conditions'
	name='terms'
	className='thin'
	round={false}
	required={true}
/>

Reverse Layout

import {Switch} from '@/ui'
				
<Switch
	label='I agree to terms and conditions'
	name='terms'
	className='reverse'
	required={true}
	round={false}
/>

Colours

<Switch
	switchColor='info' // 'info | 'success' | 'warning' | 'danger' | undefined = 'info'
/>