Textarea · Tinyrack Design System

Collect multi-line text with themed borders and states.

Contract

Axis	Contract
Value	Pass `initialValue` for an uncontrolled start, or `controller` when the surrounding screen owns the text. Providing both trips an `assert`. `onChanged` reports every edit without taking ownership of the value.
Sizing	`uiSize` selects the control typography and inline padding, and the box keeps a minimum height of twice the matching control height. `minLines` (default `2`) sets the starting height; `maxLines` is left unset, so the box grows downward as text wraps. There is no drag handle, unlike the web control.
State	`enabled: false` applies the disabled opacity token, and `readOnly: true` keeps the text selectable on the muted surface. Both stop the hover border from strengthening. Focus swaps the border to the focus color at the wider focus border width.
Forms	Set `name` to register the textarea with the nearest `TRForm`, so its text appears in `TRFormState.values` and `save()`. Unlike `TRTextField`, it is not a `FormField`: `validator` is unavailable and `TRFormState.reset()` leaves the text alone. Validate in the submit handler, show the message through `TRField(errorText:)`, and restore the text through a `controller` you own.
Frame	`solid` paints the border and fill. `ghost` drops both while resting so an enclosing surface, such as a `TRCard` composer, owns the frame. The textarea still paints its own hover and focus, so the surface no longer has to, and the border box is kept at the same width so swapping appearance never moves the field. `plain` also gives up hover and focus, for a surface that shows the focus of the whole group it frames.
Labeling	`TRTextarea` renders no label of its own. Wrap it in `TRField` to attach a visible label, a description, or an error message. `placeholder` is a hint in the placeholder text color and disappears on the first character, so it cannot replace a label.

TRTextarea is the multi-line counterpart to TRTextField. Reach for it when the answer is a note or a description rather than a single short value.

Install

Add the package, then import its public library.

flutter pub add tinyrack_ui

import 'package:tinyrack_ui/tinyrack_ui.dart';

Playground

Loading the Flutter preview

Usage

import 'package:material_ui/material_ui.dart';
import 'package:tinyrack_ui/tinyrack_ui.dart';

TRField(
  label: 'Rack notes',
  control: TRTextarea(
    name: 'notes',
    placeholder: 'Operational notes',
    onChanged: setNotes,
  ),
)

Examples

Operational notes permalink

Wrap the textarea in TRField so the note carries a visible label, and keep the placeholder for the expected content rather than the label itself.

Loading the Flutter preview

Editable, read-only, and disabled permalink

Use readOnly when the note must stay readable and selectable, and enabled: false when it is unavailable. Pass the same state to TRField so the label matches the control.

Loading the Flutter preview

Medium and large permalink

uiSize changes the typography and inline padding, and the minimum height follows from the matching control height. Pick md for dense screens and lg when the reader edits longer text.

Loading the Flutter preview

Form values and manual reset permalink

A named textarea appears in TRFormState.values. Because it is not a FormField, reset() leaves the text in place, so restore the original note through the controller you own.

Loading the Flutter preview

Required-style validation and recovery permalink

TRTextarea has no required or validator property. Check the text on submit, report the problem through TRField(errorText:), and move focus back with a focusNode so the reader can fix it right away.

Loading the Flutter preview

API

TRTextarea properties

Prop	Type / default	Purpose
`controller`	`TextEditingController? · null`	Owns the text from outside the widget. Cannot be combined with `initialValue`, and the caller is responsible for disposing it.
`initialValue`	`String? · null`	Seeds the internal controller once. Later changes to the argument do not replace the text the reader has typed.
`placeholder`	`String? · null`	Shows a hint in the placeholder text color while the field is empty.
`onChanged`	`ValueChanged<String>? · null`	Fires on every edit with the current text.
`name`	`String? · null`	Registers the value with the nearest `TRForm` under this key. Disabled fields are excluded from the collected values, and `reset()` does not restore the text.
`uiSize`	`TRUiSize · TRUiSize.md`	Selects the font size, inline padding, and the control height the minimum box height is derived from.
`minLines`	`int · 2`	Sets how many lines the box shows before it grows. The rendered height never drops below twice the control height for the current `uiSize`.
`enabled`	`bool · true`	Blocks editing and focus, applies the disabled opacity token, and drops the field from the form values.
`readOnly`	`bool · false`	Keeps the text focusable and selectable but not editable, on the muted surface. The value still reaches the form.
`autofocus`	`bool · false`	Requests focus when the textarea first mounts. Use it only when the note is the single reason the screen opened.
`focusNode`	`FocusNode? · null`	Supplies an external focus node so the screen can move focus to the textarea, for example after a failed submit.
`appearance`	`TRFieldAppearance · solid`	Chooses the framed control, `ghost`, which drops the resting border and fill so a host surface can frame the textarea while the field still paints its own hover and focus, or `plain`, which leaves focus to that surface as well.