Input Group

1<InputGroup>
2  <InputGroupInput type="email" placeholder="you@example.com" />
3  <InputGroupAddon align="inline-end">
4    <Mail className="size-4" />
5  </InputGroupAddon>
6</InputGroup>

1<InputGroup>
2  <InputGroupAddon>
3    <InputGroupText>
4      <DollarSign className="size-4" />
5    </InputGroupText>
6  </InputGroupAddon>
7  <InputGroupInput type="number" placeholder="0.00" />
8</InputGroup>

1const [value, setValue] = useState("");
2
3<InputGroup>
4  <InputGroupInput
5    value={value}
6    onChange={(e) => setValue(e.target.value)}
7    placeholder="Search..."
8  />
9  {value && (
10    <InputGroupAddon align="inline-end">
11      <InputGroupButton size="icon-xs" onClick={() => setValue("")}>
12        <X className="size-4" />
13      </InputGroupButton>
14    </InputGroupAddon>
15  )}
16</InputGroup>

1const [showPassword, setShowPassword] = useState(false);
2
3<InputGroup>
4  <InputGroupAddon align="inline-start">
5    <Lock className="size-4" />
6  </InputGroupAddon>
7  <InputGroupInput
8    type={showPassword ? "text" : "password"}
9    placeholder="Enter password"
10  />
11  <InputGroupAddon align="inline-end">
12    <InputGroupButton
13      size="icon-xs"
14      onClick={() => setShowPassword(!showPassword)}
15    >
16      {showPassword ? <EyeOff /> : <Eye />}
17    </InputGroupButton>
18  </InputGroupAddon>
19</InputGroup>

1<InputGroup>
2  <InputGroupAddon>
3    <Search className="size-4" />
4  </InputGroupAddon>
5  <InputGroupSeparator />
6  <InputGroupInput placeholder="Search files..." />
7  <InputGroupSeparator />
8  <InputGroupAddon align="inline-end">
9    <InputGroupButton size="xs" variant="ghost">
10      Search
11    </InputGroupButton>
12  </InputGroupAddon>
13</InputGroup>

1<InputGroup>
2  <InputGroupAddon align="block-start">
3    <InputGroupText>Email Address</InputGroupText>
4  </InputGroupAddon>
5  <InputGroupInput type="email" placeholder="you@example.com" />
6</InputGroup>

1<InputGroup>
2  <InputGroupInput type="text" placeholder="Username" />
3  <InputGroupAddon align="block-end">
4    <InputGroupText className="text-xs">
5      This will be your public username
6    </InputGroupText>
7  </InputGroupAddon>
8</InputGroup>

1<InputGroup>
2  <InputGroupTextarea placeholder="Type your message..." rows={3} />
3  <InputGroupAddon align="block-end">
4    <InputGroupButton size="sm" variant="default">
5      <Send className="size-3" />
6      Send
7    </InputGroupButton>
8  </InputGroupAddon>
9</InputGroup>