Radio Group

import {
	RadioButton,
	RadioButtonGroup,
	RadioCard,
	RadioGroup,
	RadioGroupList,
	RadioIndicator,
	RadioItem,
	RadioItemContent,
	RadioListItem,
} from "@ngrok/mantle/radio-group";

<RadioGroup defaultValue="comfortable">
	<RadioItem className="py-1" value="default" id="simple-1">
		<RadioIndicator />
		<RadioItemContent asChild>
			<label htmlFor="simple-1">Default</label>
		</RadioItemContent>
	</RadioItem>
	<RadioItem className="py-1" value="comfortable" id="simple-2" disabled>
		<RadioIndicator />
		<RadioItemContent asChild>
			<label htmlFor="simple-2">Comfortable</label>
		</RadioItemContent>
	</RadioItem>
	<RadioItem className="py-1" value="compact" id="simple-3">
		<RadioIndicator />
		<RadioItemContent asChild>
			<label htmlFor="simple-3">Compact</label>
		</RadioItemContent>
	</RadioItem>
	<RadioItem className="py-1" value="roomy" id="simple-4">
		<RadioIndicator />
		<RadioItemContent asChild>
			<label htmlFor="simple-4">Roomy</label>
		</RadioItemContent>
	</RadioItem>
</RadioGroup>

<RadioButtonGroup defaultValue="production">
	<RadioButton value="development">Development</RadioButton>
	<RadioButton value="staging">Staging</RadioButton>
	<RadioButton value="production">Production</RadioButton>
</RadioButtonGroup>

<RadioGroupList defaultValue="comfortable">
	<RadioListItem value="default" disabled id="rli1">
		<RadioIndicator />
		<RadioItemContent>
			<label className="font-medium text-strong" htmlFor="rli1">
				Default
			</label>
			<p className="text-body">Laborum esse cillum incididunt est dolore.</p>
		</RadioItemContent>
	</RadioListItem>
	<RadioListItem value="comfortable" id="rli2">
		<RadioIndicator />
		<RadioItemContent>
			<label className="font-medium text-strong" htmlFor="rli2">
				Comfortable
			</label>
			<p className="text-body">Ea laboris tempor laborum officia ea adipisicing exercitation.</p>
		</RadioItemContent>
	</RadioListItem>
	<RadioListItem value="compact" id="rli3">
		<RadioIndicator />
		<RadioItemContent>
			<label className="font-medium text-strong" htmlFor="rli3">
				Compact
			</label>
			<p className="text-body">Adipisicing est dolore velit magna dolor voluptate velit.</p>
		</RadioItemContent>
	</RadioListItem>
	<RadioListItem value="roomy" id="rli4">
		<RadioIndicator />
		<RadioItemContent>
			<label className="font-medium text-strong" htmlFor="rli4">
				Roomy
			</label>
			<p className="text-body">Tempor dolore Lorem exercitation id nisi aliquip elit.</p>
		</RadioItemContent>
	</RadioListItem>
</RadioGroupList>

<RadioGroup className="grid grid-cols-1 gap-y-6 sm:grid-cols-3 sm:gap-x-4" defaultValue="existing">
	<RadioCard className="flex" value="newsletter" id="radiocard-1">
		<div className="flex-1">
			<label htmlFor="radiocard-1" className="block text-sm font-medium text-strong">
				Newsletter
			</label>
			<p className="mt-1 flex items-center text-sm text-gray-500">Last message sent an hour ago</p>
			<p className="mt-6 text-sm font-medium">621 users</p>
		</div>
		<RadioIndicator />
	</RadioCard>
	<RadioCard className="flex" value="existing" id="radiocard-2">
		<div className="flex-1">
			<label htmlFor="radiocard-2" className="block text-sm font-medium text-strong">
				Existing Customers
			</label>
			<p className="mt-1 flex items-center text-sm text-gray-500">Last message sent 2 weeks ago</p>
			<p className="mt-6 text-sm font-medium">1200 users</p>
		</div>
		<RadioIndicator />
	</RadioCard>
	<RadioCard className="flex" value="trial" id="radiocard-3">
		<div className="flex-1">
			<label htmlFor="radiocard-3" className="block text-sm font-medium text-strong">
				Trial Users
			</label>
			<p className="mt-1 flex items-center text-sm text-gray-500">Last message sent 4 days ago</p>
			<p className="mt-6 text-sm font-medium">2740 Users</p>
		</div>
		<RadioIndicator />
	</RadioCard>
</RadioGroup>