Components

TextInput

Lets people enter a single line of text or a number, with the label, help text and error message tied to the field.

Storybook: Storybook
Source: Source

Installation

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

TextInput is in the @bigbang/ui package. Installation and style files are the same as for Button; see the Button code tab for details.

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

<TextInput label="Field label" name="field" />;

Props

labelRequired

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

description

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

error

Description: When set, the field is marked invalid and the message is read with the input.
Type: string

invalid

Description: Marks the field 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 input gets required, and the label gets * with a visually hidden "zorunlu" or "required".
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. Use one convention per form.
Type: 'required' | 'optional'
Default: 'required'

size

Description: Input height: 32, 36 and 40 px.
Type: 'sm' | 'md' | 'lg'
Default: 'md'

startContent

Description: Content inside the field before the input: a decorative icon or a short text such as a currency or unit.
Type: ReactNode

endContent

Description: Content inside the field after the input: a unit, or one small action such as copy or reveal.
Type: ReactNode

readOnly

Description: The value can be read, focused, copied and submitted but not changed.
Type: boolean
Default: false

disabled

Description: Disables the field and its label; the value is not submitted with the form.
Type: boolean
Default: false

name

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

value

Description: Controlled value. Pass it with onValueChange. The value of the input. Use when controlled.
Type: string | number | readonly string[]

defaultValue

Description: Initial value when the field is uncontrolled. The default value of the input. Use when uncontrolled.
Type: string | number | readonly string[]

onValueChange

Description: Called whenever the value changes. Callback fired when the value changes. Use when controlled.
Type: ((value: string, eventDetails: { reason: 'none'; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element; }) => void)

className

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

Native <input> attributes (type, placeholder, autoComplete, inputMode, maxLength) are passed to the input. ref is attached to the <input>. className goes to the root element that wraps the label and texts, not to the input.

Data attributes

The input reports its state with data attributes, which you can use in style and test selectors.

Attribute	When
`data-component="text-input"`	On the root, always.
`data-part`	On the parts: `label`, `necessity`, `box`, `start`, `control`, `end`, `description`, `error`.
`data-invalid`	When `error` or `invalid` is set.
`data-required`	When `required` is set (root and input).
`data-readonly`	When `readOnly` is set (root and input).
`data-disabled`	While the field is disabled.
`data-focused`	While the field has focus.
`data-filled`	While the field has a value.
`data-dirty`	When the value differs from the initial value.
`data-touched`	After the field has been focused and left at least once.

With form libraries

Validation belongs to the app’s form layer; TextInput only shows the error. Bind the form library’s field error to error and its value to value and onValueChange.

<TextInput
  label="Field label"
  name="field"
  value={field.value}
  onValueChange={field.onChange}
  onBlur={field.onBlur}
  error={fieldState.error?.message}
/>

Field for custom controls

Field opens the label, description and error layout that TextInput uses to other controls. It wires the ids, the aria-describedby order (description first, then error), and the invalid and disabled state. The default Field.Control renders an <input>; pass your own control with render. For a fully custom layout, the parts work on their own too: Field.Root, Field.Label, Field.Control, Field.Description, Field.Error.

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

<Field label="Note" description="Visible to the team." necessityIndicator="optional">
  <Field.Control render={<textarea rows={3} />} />
</Field>