Usage
import { Radio } from '@loomhq/lens'
<Radio />
States
- Use
isChecked to check the Radio.
- Use
isDisabled to disable the Radio.
<Arrange gap="medium">
<Radio />
<Radio isChecked onChange={() => console.log()} />
<Radio isDisabled />
<Radio isDisabled isChecked />
</Arrange>
With label
<form>
<Arrange gap="small" columns="1fr">
<FormField label="Mangosteen" direction="row" labelFor="mangosteen">
<Radio id='mangosteen' name="fruits" />
</FormField>
<FormField label="Tamarind" direction="row" labelFor="tamarind">
<Radio id='tamarind' name="fruits" />
</FormField>
<FormField label="Rambutan" direction="row" labelFor="rambutan">
<Radio id='rambutan' name="fruits" />
</FormField>
</Arrange>
</form>
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>
<Radio ref={ref} />
</>
)
}
Props
onFocus
React.ReactEventHandler
onChange
React.ReactEventHandler
onBlur
React.ReactEventHandler