Usage

Import

import { Radio, RadioGroup FormControl, FormLabel, } from '@passfort/castle'
content_copy
Copy

Basic

<>
  <FormControl isRequired>
    <FormLabel>Select an option</FormLabel>
    <RadioGroup onChange={log} initialValue="2">
      <Radio value="option 1" label="Option 1" />
      <Radio value="option 2" label="Option 2" />
      <Radio value="option 3" label="Option 3" />
    </RadioGroup>
  </FormControl>

  <FormControl isDisabled>
    <FormLabel>Select an option</FormLabel>
    <RadioGroup onChange={log} initialValue="2">
      <Radio value="option 1" label="Option 1" />
      <Radio value="option 2" label="Option 2" />
      <Radio value="option 3" label="Option 3" />
    </RadioGroup>
  </FormControl>
</>
<>
  <FormControl isRequired>
    <FormLabel>Select an option</FormLabel>
    <RadioGroup onChange={log} initialValue="2">
      <Radio value="option 1" label="Option 1" />
      <Radio value="option 2" label="Option 2" />
      <Radio value="option 3" label="Option 3" />
    </RadioGroup>
  </FormControl>

  <FormControl isDisabled>
    <FormLabel>Select an option</FormLabel>
    <RadioGroup onChange={log} initialValue="2">
      <Radio value="option 1" label="Option 1" />
      <Radio value="option 2" label="Option 2" />
      <Radio value="option 3" label="Option 3" />
    </RadioGroup>
  </FormControl>
</>
content_copy
Copy
live example

Tabs

<FormControl>
  <FormLabel>Select an option</FormLabel>
  <RadioGroup type="tabs" onChange={log} initialValue="2">
    <Radio value="option 1" label="Option 1" />
    <Radio value="option 2" label="Option 2" />
    <Radio value="option 3" label="Option 3" />
  </RadioGroup>
</FormControl>
<FormControl>
  <FormLabel>Select an option</FormLabel>
  <RadioGroup type="tabs" onChange={log} initialValue="2">
    <Radio value="option 1" label="Option 1" />
    <Radio value="option 2" label="Option 2" />
    <Radio value="option 3" label="Option 3" />
  </RadioGroup>
</FormControl>
content_copy
Copy
live example

Horizontal

<FormControl>
  <FormLabel>Select an option</FormLabel>
  <RadioGroup isRow type="tabs" onChange={log} initialValue="2">
    <Radio value="option 1" label="Option 1" />
    <Radio value="option 2" label="Option 2" />
    <Radio value="option 3" label="Option 3" />
  </RadioGroup>
</FormControl>
<FormControl>
  <FormLabel>Select an option</FormLabel>
  <RadioGroup isRow type="tabs" onChange={log} initialValue="2">
    <Radio value="option 1" label="Option 1" />
    <Radio value="option 2" label="Option 2" />
    <Radio value="option 3" label="Option 3" />
  </RadioGroup>
</FormControl>
content_copy
Copy
live example

Controlled

function Example() {
  const [state, setState] = React.useState('1')

  useEffect(() => {
    setState('2')
  }, [])

  const onChange = (v) => {
    log(v)
    setState(v)
  }

  return (
    <RadioGroup onChange={onChange} value={state}>
      <Radio value="option 1" label="Option 1" />
      <Radio value="option 2" label="Option 2" />
      <Radio value="option 3" label="Option 3" />
    </RadioGroup>
  )
}
function Example() {
  const [state, setState] = React.useState('1')

  useEffect(() => {
    setState('2')
  }, [])

  const onChange = (v) => {
    log(v)
    setState(v)
  }

  return (
    <RadioGroup onChange={onChange} value={state}>
      <Radio value="option 1" label="Option 1" />
      <Radio value="option 2" label="Option 2" />
      <Radio value="option 3" label="Option 3" />
    </RadioGroup>
  )
}
content_copy
Copy
live example