upstream/upstream-shadcn-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)
All checks were successful
Release / Create Version PR or Publish Stable Release (push) Has been skipped
Details
Release / Publish Prerelease to NPM (push) Has been skipped
Details
Monitor Registries / Monitor registry health (push) Has been skipped
Details

Browse Source
This commit is contained in:
upstream-mirror
2026-09-15 22:44:43 +05:00
commit 1416db152c
5727 changed files with 630238 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

222
apps/v4/registry/bases/radix/examples/radio-group-example.tsx Normal file
View File

@@ -0,0 +1,222 @@
import {
Example,
ExampleWrapper,
} from "@/registry/bases/radix/components/example"
import {
Field,
FieldContent,
FieldDescription,
FieldLabel,
FieldLegend,
FieldSet,
} from "@/registry/bases/radix/ui/field"
import {
RadioGroup,
RadioGroupItem,
} from "@/registry/bases/radix/ui/radio-group"
export default function RadioGroupExample() {
return (
<ExampleWrapper>
<RadioGroupBasic />
<RadioGroupWithDescriptions />
<RadioGroupWithFieldSet />
<RadioGroupGrid />
<RadioGroupDisabled />
<RadioGroupInvalid />
</ExampleWrapper>
)
}
function RadioGroupBasic() {
return (
<Example title="Basic">
<RadioGroup defaultValue="comfortable">
<Field orientation="horizontal">
<RadioGroupItem value="default" id="r1" />
<FieldLabel htmlFor="r1" className="font-normal">
Default
</FieldLabel>
</Field>
<Field orientation="horizontal">
<RadioGroupItem value="comfortable" id="r2" />
<FieldLabel htmlFor="r2" className="font-normal">
Comfortable
</FieldLabel>
</Field>
<Field orientation="horizontal">
<RadioGroupItem value="compact" id="r3" />
<FieldLabel htmlFor="r3" className="font-normal">
Compact
</FieldLabel>
</Field>
</RadioGroup>
</Example>
)
}
function RadioGroupWithDescriptions() {
return (
<Example title="With Descriptions">
<RadioGroup defaultValue="plus">
<FieldLabel htmlFor="plus-plan">
<Field orientation="horizontal">
<FieldContent>
<div className="font-medium">Plus</div>
<FieldDescription>
For individuals and small teams
</FieldDescription>
</FieldContent>
<RadioGroupItem value="plus" id="plus-plan" />
</Field>
</FieldLabel>
<FieldLabel htmlFor="pro-plan">
<Field orientation="horizontal">
<FieldContent>
<div className="font-medium">Pro</div>
<FieldDescription>For growing businesses</FieldDescription>
</FieldContent>
<RadioGroupItem value="pro" id="pro-plan" />
</Field>
</FieldLabel>
<FieldLabel htmlFor="enterprise-plan">
<Field orientation="horizontal">
<FieldContent>
<div className="font-medium">Enterprise</div>
<FieldDescription>
For large teams and enterprises
</FieldDescription>
</FieldContent>
<RadioGroupItem value="enterprise" id="enterprise-plan" />
</Field>
</FieldLabel>
</RadioGroup>
</Example>
)
}
function RadioGroupWithFieldSet() {
return (
<Example title="With FieldSet">
<FieldSet>
<FieldLegend>Battery Level</FieldLegend>
<FieldDescription>
Choose your preferred battery level.
</FieldDescription>
<RadioGroup defaultValue="medium">
<Field orientation="horizontal">
<RadioGroupItem value="high" id="battery-high" />
<FieldLabel htmlFor="battery-high" className="font-normal">
High
</FieldLabel>
</Field>
<Field orientation="horizontal">
<RadioGroupItem value="medium" id="battery-medium" />
<FieldLabel htmlFor="battery-medium" className="font-normal">
Medium
</FieldLabel>
</Field>
<Field orientation="horizontal">
<RadioGroupItem value="low" id="battery-low" />
<FieldLabel htmlFor="battery-low" className="font-normal">
Low
</FieldLabel>
</Field>
</RadioGroup>
</FieldSet>
</Example>
)
}
function RadioGroupGrid() {
return (
<Example title="Grid Layout">
<RadioGroup defaultValue="medium" className="grid grid-cols-2 gap-2">
<FieldLabel htmlFor="size-small">
<Field orientation="horizontal">
<RadioGroupItem value="small" id="size-small" />
<div className="font-medium">Small</div>
</Field>
</FieldLabel>
<FieldLabel htmlFor="size-medium">
<Field orientation="horizontal">
<RadioGroupItem value="medium" id="size-medium" />
<div className="font-medium">Medium</div>
</Field>
</FieldLabel>
<FieldLabel htmlFor="size-large">
<Field orientation="horizontal">
<RadioGroupItem value="large" id="size-large" />
<div className="font-medium">Large</div>
</Field>
</FieldLabel>
<FieldLabel htmlFor="size-xlarge">
<Field orientation="horizontal">
<RadioGroupItem value="xlarge" id="size-xlarge" />
<div className="font-medium">X-Large</div>
</Field>
</FieldLabel>
</RadioGroup>
</Example>
)
}
function RadioGroupDisabled() {
return (
<Example title="Disabled">
<RadioGroup defaultValue="option2" disabled>
<Field orientation="horizontal">
<RadioGroupItem value="option1" id="disabled-1" />
<FieldLabel htmlFor="disabled-1" className="font-normal">
Option 1
</FieldLabel>
</Field>
<Field orientation="horizontal">
<RadioGroupItem value="option2" id="disabled-2" />
<FieldLabel htmlFor="disabled-2" className="font-normal">
Option 2
</FieldLabel>
</Field>
<Field orientation="horizontal">
<RadioGroupItem value="option3" id="disabled-3" />
<FieldLabel htmlFor="disabled-3" className="font-normal">
Option 3
</FieldLabel>
</Field>
</RadioGroup>
</Example>
)
}
function RadioGroupInvalid() {
return (
<Example title="Invalid">
<FieldSet>
<FieldLegend>Notification Preferences</FieldLegend>
<FieldDescription>
Choose how you want to receive notifications.
</FieldDescription>
<RadioGroup defaultValue="email">
<Field orientation="horizontal" data-invalid>
<RadioGroupItem value="email" id="invalid-email" aria-invalid />
<FieldLabel htmlFor="invalid-email" className="font-normal">
Email only
</FieldLabel>
</Field>
<Field orientation="horizontal" data-invalid>
<RadioGroupItem value="sms" id="invalid-sms" aria-invalid />
<FieldLabel htmlFor="invalid-sms" className="font-normal">
SMS only
</FieldLabel>
</Field>
<Field orientation="horizontal" data-invalid>
<RadioGroupItem value="both" id="invalid-both" aria-invalid />
<FieldLabel htmlFor="invalid-both" className="font-normal">
Both Email & SMS
</FieldLabel>
</Field>
</RadioGroup>
</FieldSet>
</Example>
)
}