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'

View package View source

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 #

Name	Type(s)	Default	Required
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 #

@welcome-ui/system [^4.2.0]

@welcome-ui/utils [^4.2.0]

reakit [^1.3.11]

Peer dependencies #

@xstyled/styled-components [^3.6.0]

react [^16.10.2 || ^17.0.1 || ^18.0.0]

styled-components [^5.3.3]

RadioGroup