Photonix

TextArea

Multi-line text input component.

Preview

Usage
"use client";

import { Box, TextArea } from '@photonix/ultimate';

export default function TextAreaBasicExample() {
    return (
        <Box w="100%" maxW={400}>
            <TextArea label="Description" placeholder="Enter your text here..." required />
        </Box>
    );
}

Component API

TextArea

Prop
Type
Default
Description
label
string
-
Label text.
labelStyle
"inside" | "outside"
'outside'
Whether the label is placed inside or outside the input box. Default is 'outside'.
required
boolean
-
Mark the field as required (shows * indicator).
helperText
string
-
Supporting text displayed below the field.
error
boolean
-
If true, the field will be in error state.
maxLength
number
-
Maximum character count.
showCount
boolean
-
Show character count.
onChange
((value: string) => void)
-
Callback when value changes.
rows
number
4
Number of visible text lines. Default is 4.
resize
"none" | "horizontal" | "vertical" | "both"
'vertical'
Allow resize. Default is 'vertical'.
width
string | number
-
Fixed width of the textarea.
fullWidth
boolean
true
Whether the textarea takes up full width of container. Default is true.

Variants

Labels

Use labels to provide clear titles for your text areas.

Labels
"use client";

import { Flex, TextArea } from '@photonix/ultimate';

export default function TextAreaLabelsExample() {
    return (
        <Flex direction="column" gap="md" w="100%" maxW={400}>
            <TextArea label="Description" placeholder="Outside label (Default)" />
            <TextArea label="Bio" placeholder="Required indicator" required />
        </Flex>
    );
}

Resize Behavior

Control how the text area can be resized by the user.

Resize Behavior
"use client";

import { Flex, TextArea } from '@photonix/ultimate';

export default function TextAreaResizeExample() {
    return (
        <Flex direction="column" gap="md" w="100%" maxW={400}>
            <TextArea placeholder="Vertical (Default)" resize="vertical" />
            <TextArea placeholder="No Resize" resize="none" />
            <TextArea placeholder="Horizontal" resize="horizontal" />
        </Flex>
    );
}

Character Count

Character count can be shown with or without a max length limit.

0/100
0
Character Count
"use client";

import { Flex, TextArea } from '@photonix/ultimate';

export default function TextAreaCountExample() {
    return (
        <Flex direction="column" gap="md" w="100%" maxW={400}>
            <TextArea placeholder="No limit, no counter" />
            <TextArea placeholder="Max 100 characters" maxLength={100} />
            <TextArea placeholder="Count only, no limit" showCount />
            <TextArea placeholder="Limited but hidden counter" maxLength={100} showCount={false} />
        </Flex>
    );
}

Rows

Set the initial height by defining the number of rows.

Rows
"use client";

import { Flex, TextArea } from '@photonix/ultimate';

export default function TextAreaRowsExample() {
    return (
        <Flex direction="column" gap="md" w="100%" maxW={400}>
            <TextArea placeholder="2 Rows" rows={2} />
            <TextArea placeholder="6 Rows" rows={6} />
        </Flex>
    );
}

States

Visual feedback for errors and disabled state.

Invalid input
States
"use client";

import { Flex, TextArea } from '@photonix/ultimate';

export default function TextAreaStatesExample() {
    return (
        <Flex direction="column" gap="md" w="100%" maxW={400}>
            <TextArea placeholder="Default" />
            <TextArea placeholder="Error" error helperText="Invalid input" />
            <TextArea placeholder="Disabled" disabled defaultValue="Fixed content" />
        </Flex>
    );
}

Width & Full Width

TextArea is full-width by default, but can also be auto or fixed width.

Width & Full Width
"use client";

import { Box, Flex, TextArea } from '@photonix/ultimate';

export default function TextAreaWidthExample() {
    return (
        <Flex direction="column" gap="md" w="100%">
            <TextArea label="Auto Width" fullWidth={false} placeholder="Adjusts to content" />
            <Box w="100%" maxW={300}>
                <TextArea label="Parent Max Width" placeholder="Inherits 100% within 300px parent" />
            </Box>
            <TextArea label="Fixed Width" width="250px" placeholder="250px" />
        </Flex>
    );
}

On this page

Preview
Component API
Variants
Labels
Resize Behavior
Character Count
Rows
States
Width & Full Width
Photonix UI - React Components, Templates & Figma Design System