FormRadioDemo() — ui Function Reference

Architecture documentation for the FormRadioDemo() function in field-demo.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ FormRadioDemo() — ui Function Reference

Dependency Diagram

graph TD
  4e85d41e_968f_f03e_2863_f0578b4b1b0b["FormRadioDemo()"]
  b9b36d9d_9701_6134_d4ee_41213e7f1788["field-demo.tsx"]
  4e85d41e_968f_f03e_2863_f0578b4b1b0b -->|defined in| b9b36d9d_9701_6134_d4ee_41213e7f1788
  style 4e85d41e_968f_f03e_2863_f0578b4b1b0b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/components/field-demo.tsx lines 2136–2279

export function FormRadioDemo() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Radio Fields</CardTitle>
        <CardDescription>Different radio field configurations</CardDescription>
      </CardHeader>
      <CardContent>
        <FieldGroup>
          <FieldSet>
            <FieldLegend>Subscription Plan</FieldLegend>
            <RadioGroup defaultValue="free">
              <Field orientation="horizontal">
                <RadioGroupItem value="free" id="free-ejb" />
                <FieldLabel htmlFor="free-ejb" className="font-normal">
                  Free Plan
                </FieldLabel>
              </Field>
              <Field orientation="horizontal">
                <RadioGroupItem value="pro" id="pro-y3g" />
                <FieldLabel htmlFor="pro-y3g" className="font-normal">
                  Pro Plan
                </FieldLabel>
              </Field>
              <Field orientation="horizontal">
                <RadioGroupItem value="enterprise" id="enterprise-l4t" />
                <FieldLabel htmlFor="enterprise-l4t" className="font-normal">
                  Enterprise
                </FieldLabel>
              </Field>
            </RadioGroup>
          </FieldSet>
          <FieldSet>
            <FieldLegend>Size</FieldLegend>
            <FieldDescription>Select your preferred size.</FieldDescription>
            <RadioGroup
              defaultValue="medium"
              className="grid w-fit grid-cols-2"
            >
              <Field orientation="horizontal">
                <RadioGroupItem value="small" id="size-small-1g9" />
                <FieldLabel htmlFor="size-small-1g9" className="font-normal">
                  Small
                </FieldLabel>
              </Field>
              <Field orientation="horizontal">
                <RadioGroupItem value="medium" id="size-medium-okp" />
                <FieldLabel htmlFor="size-medium-okp" className="font-normal">
                  Medium
                </FieldLabel>
              </Field>
              <Field orientation="horizontal">
                <RadioGroupItem value="large" id="size-large-tzy" />
                <FieldLabel htmlFor="size-large-tzy" className="font-normal">
                  Large
                </FieldLabel>
              </Field>
              <Field orientation="horizontal">
                <RadioGroupItem value="xlarge" id="size-xlarge-2nn" />
                <FieldLabel htmlFor="size-xlarge-2nn" className="font-normal">
                  X-Large
                </FieldLabel>
              </Field>
            </RadioGroup>
          </FieldSet>
          <FieldSet>
            <FieldLegend>Notification Preferences</FieldLegend>
            <FieldDescription>
              Choose how you want to receive notifications.
            </FieldDescription>
            <RadioGroup defaultValue="email">
              <Field orientation="horizontal">
                <RadioGroupItem value="email" id="notify-email-enh" />
                <FieldLabel htmlFor="notify-email-enh" className="font-normal">
                  Email only
                </FieldLabel>
              </Field>
              <Field orientation="horizontal">
                <RadioGroupItem value="sms" id="notify-sms" />
                <FieldLabel htmlFor="notify-sms" className="font-normal">
                  SMS only