Usage

Import

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

Basic

<>
  <FormControl isRequired>
    <FormLabel>Select an option</FormLabel>
    <RadioGroup onChange={(v) => console.warn(v)} initialValue="2">
      <Radio value="1" label="Option 1" />
      <Radio value="2" label="Option 2" />
      <Radio value="3" label="Option 3" />
    </RadioGroup>
  </FormControl>

  <FormControl isDisabled>
    <FormLabel>Select an option</FormLabel>
    <RadioGroup onChange={(v) => console.warn(v)} initialValue="2">
      <Radio value="1" label="Option 1" />
      <Radio value="2" label="Option 2" />
      <Radio value="3" label="Option 3" />
    </RadioGroup>
  </FormControl>
</>
<>
  <FormControl isRequired>
    <FormLabel>Select an option</FormLabel>
    <RadioGroup onChange={(v) => console.warn(v)} initialValue="2">
      <Radio value="1" label="Option 1" />
      <Radio value="2" label="Option 2" />
      <Radio value="3" label="Option 3" />
    </RadioGroup>
  </FormControl>

  <FormControl isDisabled>
    <FormLabel>Select an option</FormLabel>
    <RadioGroup onChange={(v) => console.warn(v)} initialValue="2">
      <Radio value="1" label="Option 1" />
      <Radio value="2" label="Option 2" />
      <Radio value="3" label="Option 3" />
    </RadioGroup>
  </FormControl>
</>
content_copy
Copy
live example

Tabs

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

Controlled

() => {
  const [state, setState] = React.useState("1");

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

  return (
    <RadioGroup value={state}>
      <Radio value="1" label="First" />
      <Radio value="2" label="Second" />
    </RadioGroup>
  );
};
() => {
  const [state, setState] = React.useState("1");

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

  return (
    <RadioGroup value={state}>
      <Radio value="1" label="First" />
      <Radio value="2" label="Second" />
    </RadioGroup>
  );
};
content_copy
Copy
live example