InputGroupInCard() — ui Function Reference

Architecture documentation for the InputGroupInCard() function in input-group-example.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ InputGroupInCard() — ui Function Reference

Dependency Diagram

graph TD
  04f95697_6e78_f38b_87c2_e37a06fc1aaa["InputGroupInCard()"]
  d4b03b04_037e_50ca_dc94_f27472485362["input-group-example.tsx"]
  04f95697_6e78_f38b_87c2_e37a06fc1aaa -->|defined in| d4b03b04_037e_50ca_dc94_f27472485362
  style 04f95697_6e78_f38b_87c2_e37a06fc1aaa fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/input-group-example.tsx lines 670–741

function InputGroupInCard() {
  return (
    <Example title="In Card">
      <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">
                  <IconPlaceholder
                    lucide="MailIcon"
                    tabler="IconMail"
                    hugeicons="MailIcon"
                    phosphor="EnvelopeIcon"
                    remixicon="RiMailLine"
                  />
                </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">
                  <IconPlaceholder
                    lucide="ExternalLinkIcon"
                    tabler="IconExternalLink"
                    hugeicons="LinkSquare02Icon"
                    phosphor="ArrowSquareOutIcon"
                    remixicon="RiExternalLinkLine"
                  />
                </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>
    </Example>
  )
}