Usage
import { Switch } from '@loomhq/lens'
<Switch />
States
- Use
isActive to enable the Switch. - Use
isDisabled to disable the Switch.
<Arrange gap="small">
<Switch />
<Switch isActive />
<Switch isDisabled />
<Switch isActive isDisabled />
</Arrange>
With label
<FormField
direction="row"
label="Turn ON"
labelFor="exampleSwitch"
>
<Switch id="exampleSwitch" />
</FormField>
Forwarding refs
Use the ref prop to access the DOM node.
More about forwarding refs.
() => {
const ref = useRef(null)
const onClick = () => ref.current.checked = true
return (
<>
<Spacer bottom="small">
<Button onClick={onClick}>Toggle</Button>
</Spacer>
<Switch ref={ref} />
</>
)
}
Props