snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

apps/v4/examples/radix/input-group-in-card.tsx

@@ -0,0 +1,79 @@
+import { ExternalLinkIcon, MailIcon } from "lucide-react"
+
+import { Button } from "@/styles/radix-nova/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/styles/radix-nova/ui/card"
+import { Field, FieldGroup, FieldLabel } from "@/styles/radix-nova/ui/field"
+import { Input } from "@/styles/radix-nova/ui/input"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+} from "@/styles/radix-nova/ui/input-group"
+
+export function InputGroupInCard() {
+  return (
+    <Card className="w-full">
+      <CardHeader>
+        <CardTitle>Card with Input Group</CardTitle>
+        <CardDescription>This is a card with an input group.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <FieldGroup>
+          <Field>
+            <FieldLabel htmlFor="email-input">Email Address</FieldLabel>
+            <InputGroup>
+              <InputGroupInput
+                id="email-input"
+                type="email"
+                placeholder="you@example.com"
+              />
+              <InputGroupAddon align="inline-end">
+                <MailIcon />
+              </InputGroupAddon>
+            </InputGroup>
+          </Field>
+          <Field>
+            <FieldLabel htmlFor="website-input">Website URL</FieldLabel>
+            <InputGroup>
+              <InputGroupAddon>
+                <InputGroupText>https://</InputGroupText>
+              </InputGroupAddon>
+              <InputGroupInput id="website-input" placeholder="example.com" />
+              <InputGroupAddon align="inline-end">
+                <ExternalLinkIcon />
+              </InputGroupAddon>
+            </InputGroup>
+          </Field>
+          <Field>
+            <FieldLabel htmlFor="feedback-textarea">
+              Feedback & Comments
+            </FieldLabel>
+            <InputGroup>
+              <InputGroupTextarea
+                id="feedback-textarea"
+                placeholder="Share your thoughts..."
+                className="min-h-[100px]"
+              />
+              <InputGroupAddon align="block-end">
+                <InputGroupText>0/500 characters</InputGroupText>
+              </InputGroupAddon>
+            </InputGroup>
+          </Field>
+        </FieldGroup>
+      </CardContent>
+      <CardFooter className="justify-end gap-2">
+        <Button variant="outline">Cancel</Button>
+        <Button>Submit</Button>
+      </CardFooter>
+    </Card>
+  )
+}