Usage
import { Checkbox } from '@loomhq/lens'
<Checkbox />
States
- Use
isChecked to check the checkbox. - Use
isDisabled to disable the checkbox. - Use
isIndeterminate for indeterminate checkbox.
<Arrange gap="medium">
<Checkbox />
<Checkbox isChecked onChange={() => console.log()} />
<Checkbox isIndeterminate onChange={() => console.log()} />
<Checkbox isDisabled />
<Checkbox isDisabled isChecked />
<Checkbox isDisabled isIndeterminate />
</Arrange>
With label
<FormField
direction="row"
label="Choose me"
labelFor="exampleCheckboxId"
>
<Checkbox id="exampleCheckboxId" />
</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>
<Checkbox ref={ref} />
</>
)
}
Props