Radio

import { Radio } from '@raystack/apsara';

function App() {
  return (
    <Radio.Group>
      <label>
        <Radio value="option1" />
        <span>Option 1</span>
      </label>
      <label>
        <Radio value="option2" />
        <span>Option 2</span>
      </label>
    </Radio.Group>
  );
}

function ControlledRadio() {
  const [value, setValue] = useState('option1');

  return (
    <Radio.Group value={value} onValueChange={setValue}>
      <label>
        <Radio value="option1" />
        <span>Option 1</span>
      </label>
      <label>
        <Radio value="option2" />
        <span>Option 2</span>
      </label>
      <label>
        <Radio value="option3" />
        <span>Option 3</span>
      </label>
    </Radio.Group>
  );
}

<Radio.Group defaultValue="option2">
  <label>
    <Radio value="option1" />
    <span>Option 1</span>
  </label>
  <label>
    <Radio value="option2" />
    <span>Option 2</span>
  </label>
  <label>
    <Radio value="option3" />
    <span>Option 3</span>
  </label>
</Radio.Group>

<Radio.Group>
  <div>
    <label>
      <Radio value="basic" />
      <div>
        <strong>Basic Plan</strong>
        <p>Perfect for individuals</p>
      </div>
    </label>
  </div>
  <div>
    <label>
      <Radio value="pro" />
      <div>
        <strong>Pro Plan</strong>
        <p>For professional teams</p>
      </div>
    </label>
  </div>
  <div>
    <label>
      <Radio value="enterprise" />
      <div>
        <strong>Enterprise Plan</strong>
        <p>For large organizations</p>
      </div>
    </label>
  </div>
</Radio.Group>

<Radio.Group defaultValue="option1">
  <label>
    <Radio value="option1" />
    <span>Enabled option</span>
  </label>
  <label>
    <Radio value="option2" disabled />
    <span>Disabled option</span>
  </label>
</Radio.Group>

<Radio.Group disabled>
  <label>
    <Radio value="option1" />
    <span>All options disabled</span>
  </label>
  <label>
    <Radio value="option2" />
    <span>All options disabled</span>
  </label>
</Radio.Group>

<form>
  <Radio.Group name="plan" required>
    <label>
      <Radio value="basic" />
      <span>Basic</span>
    </label>
    <label>
      <Radio value="pro" />
      <span>Pro</span>
    </label>
    <label>
      <Radio value="enterprise" />
      <span>Enterprise</span>
    </label>
  </Radio.Group>
  <button type="submit">Submit</button>
</form>

<Radio.Group name="preference" required>
  <label>
    <Radio value="yes" />
    <span>Yes</span>
  </label>
  <label>
    <Radio value="no" />
    <span>No</span>
  </label>
</Radio.Group>