RadioGroupInvalid() — ui Function Reference

Architecture documentation for the RadioGroupInvalid() function in radio-group-invalid.tsx from the ui codebase.

Function tsx DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ RadioGroupInvalid() — ui Function Reference

Dependency Diagram

graph TD
  aa5680ea_47e0_0ebc_5ce8_39a56be264f3["RadioGroupInvalid()"]
  19e91645_6212_724a_38c1_26df970c9ae3["radio-group-invalid.tsx"]
  aa5680ea_47e0_0ebc_5ce8_39a56be264f3 -->|defined in| 19e91645_6212_724a_38c1_26df970c9ae3
  style aa5680ea_47e0_0ebc_5ce8_39a56be264f3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/radio-group-invalid.tsx lines 10–39

export function RadioGroupInvalid() {
  return (
    <FieldSet className="w-full max-w-xs">
      <FieldLegend variant="label">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>
  )
}