Text fields and actions in a shared Minecraft surface.
Preview
Usage
Import InputGroup, InputGroupInput, InputGroupAddon and InputGroupButton from @/components/ui/input-group. The example submits a controlled chat field, shows the sent text and clears the input.
Composition
The root provides scale context and role="group". Name the actual input; addon text is not automatically a label. Addon align supports inline-start, inline-end, block-start and block-end. Use InputGroupTextarea for multiline content, InputGroupText for static addons and an explicit type="submit" on send buttons.
API and accessibility
Buttons default to type="button" and 40 logical pixels wide. Clicking a noninteractive addon focuses the first input/textarea; buttons and links keep their own actions. The shared layout is a web adaptation composed of native text/control constituents.
See the underlying API for shared semantics.
Installation
Component source
This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.
"use client";
import * as React from "react";
import { Button } from "./button";
import { Input } from "./input";
import { MinecraftProse } from "./minecraft-prose";
import { minecraftClasses as cn, minecraftStyle } from "./minecraft-render";
import { Textarea } from "./textarea";
import "./minecraft-input-group.css";