InputGroupDemo() — ui Function Reference

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

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ InputGroupDemo() — ui Function Reference

Dependency Diagram

graph TD
  64162604_6d5b_d9ac_c909_7a47f61038b2["InputGroupDemo()"]
  e3178997_6ee3_de7a_6576_a802643ac583["input-group-demo.tsx"]
  64162604_6d5b_d9ac_c909_7a47f61038b2 -->|defined in| e3178997_6ee3_de7a_6576_a802643ac583
  style 64162604_6d5b_d9ac_c909_7a47f61038b2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/components/input-group-demo.tsx lines 70–663

export function InputGroupDemo() {
  const [country, setCountry] = useState("+1")

  return (
    <div className="flex w-full flex-wrap gap-12 pb-72 *:[div]:w-full *:[div]:max-w-sm">
      <div className="flex flex-col gap-10">
        <Field>
          <FieldLabel htmlFor="input-default-01">
            Default (No Input Group)
          </FieldLabel>
          <Input placeholder="Default" id="input-default-01" />
        </Field>
        <Field>
          <FieldLabel htmlFor="input-group-02">Input Group</FieldLabel>
          <InputGroup>
            <InputGroupInput id="input-group-02" placeholder="Default" />
          </InputGroup>
        </Field>
        <Field data-disabled="true">
          <FieldLabel htmlFor="input-disabled-03">Disabled</FieldLabel>
          <InputGroup>
            <InputGroupInput
              id="input-disabled-03"
              placeholder="This field is disabled"
              disabled
            />
          </InputGroup>
        </Field>
        <Field data-invalid="true">
          <FieldLabel htmlFor="input-invalid-04">Invalid</FieldLabel>
          <InputGroup>
            <InputGroupInput
              id="input-invalid-04"
              placeholder="This field is invalid"
              aria-invalid="true"
            />
          </InputGroup>
        </Field>
        <Field>
          <FieldLabel htmlFor="input-icon-left-05">Icon (left)</FieldLabel>
          <InputGroup>
            <InputGroupInput id="input-icon-left-05" />
            <InputGroupAddon>
              <SearchIcon className="text-muted-foreground" />
            </InputGroupAddon>
          </InputGroup>
          <InputGroup>
            <InputGroupInput id="input-icon-left-06" />
            <InputGroupAddon>
              <FlipVerticalIcon className="text-muted-foreground" />
            </InputGroupAddon>
          </InputGroup>
        </Field>
        <Field>
          <FieldLabel htmlFor="input-icon-right-07">Icon (right)</FieldLabel>
          <InputGroup>
            <InputGroupInput id="input-icon-right-07" />
            <InputGroupAddon align="inline-end">
              <EyeClosedIcon />
            </InputGroupAddon>
          </InputGroup>
          <InputGroup>
            <InputGroupInput id="input-icon-right-08" />
            <InputGroupAddon align="inline-end">
              <IconLoader2 className="text-muted-foreground animate-spin" />
            </InputGroupAddon>
          </InputGroup>
        </Field>
        <Field>
          <FieldLabel htmlFor="input-icon-both-09">Icon (both)</FieldLabel>
          <InputGroup>
            <InputGroupInput id="input-icon-both-09" />
            <InputGroupAddon>
              <IconMicrophone className="text-muted-foreground" />
            </InputGroupAddon>
            <InputGroupAddon align="inline-end">
              <IconPlayerRecordFilled className="animate-pulse text-red-500" />
            </InputGroupAddon>
          </InputGroup>
        </Field>
        <Field>