Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    Textarea

    Multi-line text entry for descriptions, reasons and notes.

    Storybook
    Storybook
    Source
    Source

    Installation

    Section titled “Installation”
    Package
    @bigbang/ui
    Import
    import { Textarea } from '@bigbang/ui';
    Source
    Textarea.tsx
    Storybook
    Textarea · Playground

    Textarea is in the @bigbang/ui package.

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

    <Textarea label="Field label" maxLength={500} showCount value={value} onValueChange={setValue} />;
    <Textarea label="Field label" maxRows={5} />;

    Props

    Section titled “Props”
    labelRequired
    Description
    The visible label, bound to the textarea with <label>. A placeholder does not replace it.
    Type
    string
    description
    Description
    Help text under the field, linked with aria-describedby before the error.
    Type
    ReactNode
    error
    Description
    When set, the field is invalid and the message is read with the textarea. Pass a list for several messages.
    Type
    string | readonly 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 textarea 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.
    Type
    'required' | 'optional'
    Default
    'required'
    rows
    Description
    Visible lines before the user types; the minimum height.
    Type
    number
    Default
    3
    autoResize
    Description
    Grows with the content instead of scrolling, up to maxRows lines, and hides the resize handle. Set false for a fixed height with a resize handle.
    Type
    boolean
    Default
    true
    maxRows
    Description
    Line limit of autoResize; past it the textarea scrolls.
    Type
    number
    Default
    8
    maxLength
    Description
    Character limit. With showCount the counter shows it and the field turns danger over it; typing is not blocked.
    Type
    number
    showCount
    Description
    Shows the character counter under the field. Needs maxLength.
    Type
    boolean
    Default
    false
    placeholder
    Description
    Short example text inside the empty textarea. It is not a label.
    Type
    string
    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.
    Type
    string
    defaultValue
    Description
    Initial value when the field is uncontrolled.
    Type
    string
    onValueChange
    Description
    Called with the new text whenever the value changes.
    Type
    (value: string) => void
    className
    Description
    Added to the root element; use it for layout only.
    Type
    string

    Data attributes

    Section titled “Data attributes”
    • data-component="textarea": on the root element.
    • data-part: label, control, counter, description, error.
    • data-invalid, data-disabled, data-required, data-readonly: on the root element.