Radio Group

import { RadioGroup } from "@ngrok/mantle/radio-group";

<RadioGroup.Root defaultValue="comfortable">
	<RadioGroup.Item className="py-1" value="default" id="simple-1">
		<RadioGroup.Indicator />
		<RadioGroup.ItemContent asChild>
			<label htmlFor="simple-1">Default</label>
		</RadioGroup.ItemContent>
	</RadioGroup.Item>
	<RadioGroup.Item className="py-1" value="comfortable" id="simple-2" disabled>
		<RadioGroup.Indicator />
		<RadioGroup.ItemContent asChild>
			<label htmlFor="simple-2">Comfortable</label>
		</RadioGroup.ItemContent>
	</RadioGroup.Item>
	<RadioGroup.Item className="py-1" value="compact" id="simple-3">
		<RadioGroup.Indicator />
		<RadioGroup.ItemContent asChild>
			<label htmlFor="simple-3">Compact</label>
		</RadioGroup.ItemContent>
	</RadioGroup.Item>
	<RadioGroup.Item className="py-1" value="roomy" id="simple-4">
		<RadioGroup.Indicator />
		<RadioGroup.ItemContent asChild>
			<label htmlFor="simple-4">Roomy</label>
		</RadioGroup.ItemContent>
	</RadioGroup.Item>
</RadioGroup.Root>

<RadioGroup.ButtonGroup defaultValue="production">
	<RadioGroup.Button value="development">Development</RadioGroup.Button>
	<RadioGroup.Button value="staging">Staging</RadioGroup.Button>
	<RadioGroup.Button value="production">Production</RadioGroup.Button>
</RadioGroup.ButtonGroup>

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

<RadioGroup.Root className="grid grid-cols-1 gap-y-6 sm:grid-cols-3 sm:gap-x-4" defaultValue="existing">
	<RadioGroup.Card 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>
		<RadioGroup.Indicator />
	</RadioGroup.Card>
	<RadioGroup.Card 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>
		<RadioGroup.Indicator />
	</RadioGroup.Card>
	<RadioGroup.Card 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>
		<RadioGroup.Indicator />
	</RadioGroup.Card>
</RadioGroup.Root>