Components

InputGroup

Puts a text control and its addons before, after, above or below it in one box.

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { InputGroup } from '@bigbang/ui';
Source: InputGroup.tsx
Storybook: InputGroup · Playground

InputGroup is in the @bigbang/ui package.

import { InputGroup } from '@bigbang/ui';

<InputGroup label="Field label">
  <InputGroup.Addon>
    <InputGroup.Text>https://</InputGroup.Text>
  </InputGroup.Addon>
  <InputGroup.Input value={value} onValueChange={setValue} />
</InputGroup>;

The part prop types are exported too: InputGroupAddonProps, InputGroupInputProps, InputGroupTextareaProps, InputGroupTextProps, InputGroupButtonProps.

Props

labelRequired

Description: The visible label, bound to the input or textarea with <label>. A placeholder does not replace it.
Type: string

description

Description: Help text under the group, linked with aria-describedby before the error.
Type: ReactNode

error

Description: When set, the group is invalid and the message is read with the control.
Type: string

invalid

Description: Marks the group invalid without a message, for example when the message is in an error summary.
Type: boolean
Default: false

required

Description: The value is required: the label gets * with a visually hidden "zorunlu" or "required". Set required on the input too.
Type: boolean
Default: false

necessityIndicator

Description: Which fields the form marks: 'required' marks required fields, 'optional' adds "(isteğe bağlı)" or "(optional)" to the others.
Type: 'required' | 'optional'
Default: 'required'

size

Description: Height of the input row: 32, 36 or 40 px, as TextInput.
Type: 'sm' | 'md' | 'lg'
Default: 'md'

disabled

Description: Disables the control, the addons' look and the label; the value is not submitted.
Type: boolean
Default: false

name

Description: Field name used when the form is submitted.
Type: string

className

Description: Added to the root element; use it for layout only.
Type: string

childrenRequired

Description: One InputGroup.Input or InputGroup.Textarea, and InputGroup.Addon parts in any order; align places them.
Type: ReactNode

Parts

InputGroup.Input: Base UI Input; takes attributes such as value, defaultValue, onValueChange, required and inputMode.
InputGroup.Textarea: takes rows, placeholder, value, defaultValue and onValueChange; it grows with its content from rows.
InputGroup.Addon: align (inline-start by default, inline-end, block-start, block-end) and divider for a line between a block addon and the control.
InputGroup.Text: addon text.
InputGroup.Button: a compact 24 px ghost button; children for text (with an optional icon), or icon with label for an icon-only button with a Tooltip. Takes onClick and disabled.

Data attributes

data-component="input-group": on the root element.
data-part: box, addon, control, button.
data-align: on an addon.