WUI logo

RadioTab

Allows user to choose between some options and only one can be return.

version

4.2.0

install

yarn add @welcome-ui/radio-tab

usage

import { RadioTab } from '@welcome-ui/radio-tab'

Usage #

function () {
const [value, setValue] = React.useState('twitter')
const handleChange = event => {
setValue(event.target.value)
}
return (
<Field label="Social networks" mb="xl" required>
<RadioGroup name="social_1" options={constants.ITEMS} renderOption={RadioTab} value={value} onChange={handleChange} />
</Field>
)
}
function () {
const [value, setValue] = React.useState('twitter')
const handleChange = event => {
setValue(event.target.value)
}
return (
<Field label="Social networks" mb="xl" required w={1 / 3}>
<RadioGroup name="social_1" options={constants.ITEMS} flexDirection="column" renderOption={RadioTab} value={value} onChange={handleChange} />
</Field>
)
}

Properties #

NameType(s)DefaultRequired
checked
Boolean
disabled
Boolean
disabledIcon
ReactElement<any, string | JSXElementConstructor<any>>
label
ReactElement<any, string | JSXElementConstructor<any>>
onChange
(event: MouseEvent<HTMLLabelElement, MouseEvent>) => void
onClick
(event: MouseEvent<HTMLLabelElement, MouseEvent>) => void
size
"sm"
"md"
"lg"
variant
"error"
"focused"
"info"
"success"
"warning"

Packages #

Dependencies #
Peer dependencies #

Previous

RadioGroup