Forms

Input group

Combines an input or textarea with inline or block add-ons and actions.

@dawn/ui/components/input-group

Preview

Rendered from @dawn/ui

https://

Usage

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
} from "@dawn/ui/components/input-group";

export const WebsiteField = () => (
  <InputGroup>
    <InputGroupAddon>
      <InputGroupText>https://</InputGroupText>
    </InputGroupAddon>
    <InputGroupInput aria-label="Domain" placeholder="example.com" />
  </InputGroup>
);

API

InputGroupAddon aligninline-start | inline-end | block-start | block-end: Places supplementary content around the control.
InputGroupButton sizexs | sm | icon-xs | icon-sm: Sets an action's dimensions within the group.
InputGroupInput / InputGroupTextareanative control props: Provide the focus target and inherit the group's border treatment.

Exports

InputGroupInputGroupAddonInputGroupButtonInputGroupTextInputGroupInputInputGroupTextarea