UILab

Input Group

Add addons, buttons, and helper content to inputs.

12 results
"use client"

import {
  InputGroup,
  InputGroupAddon,

Usage

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from "uilab-core"
<InputGroup>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
</InputGroup>

Examples

Icon

"use client"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,

Text

$
USD
https://
.com
@company.com
120 characters left
"use client"

import {
  InputGroup,
  InputGroupAddon,

Button

https://
"use client"

import * as React from "react"
import {
  InputGroup,

Kbd

⌘K
"use client"

import {
  InputGroup,
  InputGroupAddon,
"use client"

import {
  DropdownMenu,
  DropdownMenuContent,

Spinner

Saving...
Please wait...
"use client"

import {
  InputGroup,
  InputGroupAddon,

Textarea

Line 1, Column 1
script.js
"use client"

import {
  InputGroup,
  InputGroupAddon,

On this page