validation Message
Type | String (optional) |
---|
Sets the <input>
validationMessage
.
A checkbox or radio input.
It implements the <input>
element with a type="checkbox"
or type="radio"
attribute.
validation Message
Type | String (optional) |
---|
Sets the <input>
validationMessage
.
input Props
Type | Object (required) |
---|
Props for the <input>
element. Must contain either type: 'checkbox'
or type: 'radio'
.
children
Type | JSX children (optional) |
---|
Label children. Due to the ancestor <label>
element, it may only render phrasing content without <label>
elements.
...props
Type | …* (optional) |
---|
Additional props for the container; a <label>
element.
import { Toggle } from 'device-agnostic-ui'
<Toggle inputProps={{ type: 'checkbox' }}>Label</Toggle>
import { Toggle } from 'device-agnostic-ui'
<Toggle inputProps={{ type: 'checkbox', required: true }}>
Label
</Toggle>
import { Toggle } from 'device-agnostic-ui'
<Toggle
validationMessage="Custom message."
inputProps={{ type: 'checkbox' }}
>
Label
</Toggle>
import { Button } from 'device-agnostic-ui'
<Toggle
inputProps={{
type: 'radio',
name: 'options',
value: 'a',
defaultChecked: true
}}
>
Label A
</Toggle>
<Toggle
inputProps={{
type: 'radio',
name: 'options',
value: 'b'
}}
>
Label B
</Toggle>
import { Button, Toggle } from 'device-agnostic-ui'
import React from 'react'
const InputRefExample = () => {
const ref = React.useRef()
const onClick = () => ref.current.focus()
return (
<>
<Toggle inputProps={{ type: 'checkbox', ref }} />{' '}
<Button onClick={onClick}>Focus</Button>
</>
)
}
<InputRefExample />