Photonix

TextArea

Multi-line text input component.

Preview

Usage
import { TextArea } from '@photonix/ultimate';

<TextArea label="Description" placeholder="Enter your text here..." required />

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. Supports required indicator.

Labels
<TextArea label="Description" placeholder="Outside label (Default)" />
<TextArea label="Bio" placeholder="Required indicator" required />

Resize Behavior

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

Resize Behavior
<TextArea placeholder="Vertical (Default)" resize="vertical" />
<TextArea placeholder="No Resize" resize="none" />
<TextArea placeholder="Horizontal" resize="horizontal" />

Character Count

Character counting is optional. It only appears if maxLength is defined. You can also hide it while keeping the limit by setting showCount={false}.

0/100
0
Character Count
// Unlimited (Default)
<TextArea placeholder="No limit, no counter" />

// Limited with counter
<TextArea placeholder="Max 100 characters" maxLength={100} />

// Only counter (No limit)
<TextArea placeholder="Count only, no limit" showCount />

// Limited without counter
<TextArea placeholder="Limited but hidden counter" maxLength={100} showCount={false} />

Rows

Set the initial height by defining the number of rows.

Rows
<TextArea placeholder="2 Rows" rows={2} />
<TextArea placeholder="6 Rows" rows={6} />

States

Visual feedback for errors and disabled state.

Invalid input
States
<TextArea placeholder="Default" />
<TextArea placeholder="Error" error helperText="Invalid input" />
<TextArea placeholder="Disabled" disabled defaultValue="Fixed content" />

Width & Full Width

TextArea is full-width by default. You can set a fixed width or set fullWidth to false (auto width).

Width & Full Width
<TextArea label="Auto Width" fullWidth={false} placeholder="Adjusts to content" />
<Box style={{ width: '100%', maxWidth: '300px' }}>
    <TextArea label="Parent Max Width" placeholder="Inherits 100% within 300px parent" />
</Box>
<TextArea label="Fixed Width" width="250px" placeholder="250px" />

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