InputGroup

An Input or Textarea with icons, text and buttons inside one box.

Icons and text

Addons at the start and end. Clicking an addon focuses the input.

12 results

⌘K

Code

<InputGroup>
  <Input value={state.query} placeholder="Search..." attrs={{ "aria-label": "Search" }} />
  <InputGroupAddon><Icon name="search" /></InputGroupAddon>
  <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
</InputGroup>

Usage

import { InputGroup, InputGroupAddon, InputGroupText, InputGroupButton } from "@elements/ui/input-group";

<InputGroup>
  <Input value={state.query} placeholder="Search" attrs={{ "aria-label": "Search" }} />
  <InputGroupAddon><Icon name="search" /></InputGroupAddon>
  <InputGroupAddon align="inline-end">
    <InputGroupButton onclick={() => run(state)}>Search</InputGroupButton>
  </InputGroupAddon>
</InputGroup>

Examples

Text

Prefixes, suffixes and units.

USD

https://

.com

@company.com

Code

<InputGroup>
  <Input value={state.price} placeholder="0.00" />
  <InputGroupAddon><InputGroupText>$</InputGroupText></InputGroupAddon>
  <InputGroupAddon align="inline-end"><InputGroupText>USD</InputGroupText></InputGroupAddon>
</InputGroup>

Buttons

InputGroupButton sits inside the box; Tab reaches it after the input.

https://

searches: 0

Code

<InputGroup>
  <Input value={state.url} />
  <InputGroupAddon><InputGroupText>https://</InputGroupText></InputGroupAddon>
  <InputGroupAddon align="inline-end">
    <InputGroupButton size="icon-xs" label="Copy" onclick={() => copy(state)}><Icon name="copy" /></InputGroupButton>
  </InputGroupAddon>
</InputGroup>

Tooltip

An InputGroupButton can be a Tooltip's trigger.

Code

<InputGroup>
  <Input type="password" value={state.secret} placeholder="Enter password" />
  <InputGroupAddon align="inline-end">
    <Tooltip content="This is content in a tooltip.">
      <InputGroupButton slot="trigger" size="icon-xs" label="Info"><Icon name="info" /></InputGroupButton>
    </Tooltip>
  </InputGroupAddon>
</InputGroup>

Dropdown

An InputGroupButton can be a DropdownMenu's trigger; it keeps the button inset.

Code

<InputGroup>
  <Input placeholder="Enter file name" />
  <InputGroupAddon align="inline-end">
    <DropdownMenu align="end">
      <InputGroupButton slot="trigger" size="icon-xs" label="More"><Icon name="more-horizontal" /></InputGroupButton>
      <DropdownMenuItem>Settings</DropdownMenuItem>
      <DropdownMenuItem>Copy path</DropdownMenuItem>
      <DropdownMenuItem>Open location</DropdownMenuItem>
    </DropdownMenu>
  </InputGroupAddon>
</InputGroup>

Textarea with header and footer

block-start and block-end addons sit above and below.

280 characters left

script.js

Line 1, Column 1

Code

<InputGroup>
  <Textarea value={state.post} rows={3} maxlength={280} />
  <InputGroupAddon align="block-end" bordered>
    <InputGroupText>{280 - state.post.length} characters left</InputGroupText>
    <InputGroupButton variant="primary" size="sm" class="ml-auto" onclick={() => post(state)}>Post</InputGroupButton>
  </InputGroupAddon>
</InputGroup>

Above and below an input

A block-start or block-end addon on a single-line input.

Full Name

USD

Code

<InputGroup>
  <Input value={state.name} />
  <InputGroupAddon align="block-start"><InputGroupText>Full Name</InputGroupText></InputGroupAddon>
</InputGroup>

<InputGroup>
  <Input value={state.amount} placeholder="0.00" />
  <InputGroupAddon align="block-end"><InputGroupText>USD</InputGroupText></InputGroupAddon>
</InputGroup>

Spinner, invalid, disabled

States change color, never size.

Saving...

Card number

Enter the full card number.

Code

<Field label="Card number" error={state.cardError}>
  <InputGroup>
    <Input value={state.card} />
    <InputGroupAddon><Icon name="lock" /></InputGroupAddon>
  </InputGroup>
</Field>
<InputGroup disabled>...</InputGroup>

Custom control

Any control marked data-slot=input-group-control gives its chrome to the group, here a native textarea that grows with its text.

Right to left

Inline-start and inline-end addons swap sides and keep their inset at the box edge.

١٢ نتيجة

Reference InputGroup in the manual Every part, attribute, slot, key and data attribute.