Tulip Logo IconTulip
Components

Radio Group

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

Usage

import { Label } from "@tulip-systems/core/components";
import { RadioGroup, RadioGroupItem } from "@tulip-systems/core/components";
<RadioGroup defaultValue="option-one">
  <div className="flex items-center gap-3">
    <RadioGroupItem value="option-one" id="option-one" />
    <Label htmlFor="option-one">Option One</Label>
  </div>
  <div className="flex items-center gap-3">
    <RadioGroupItem value="option-two" id="option-two" />
    <Label htmlFor="option-two">Option Two</Label>
  </div>
</RadioGroup>

Examples

Description

Standard spacing for most use cases.

More space between elements.

Minimal spacing for dense layouts.

Choice Card

Fieldset

Subscription Plan

Yearly and lifetime plans offer significant savings.

Disabled

Invalid

Notification Preferences

Choose how you want to receive notifications.

On this page