Text Field · Tinyrack Design System

Collect and validate text while preserving Flutter controller, focus, keyboard, autofill, and Form lifecycle behavior.

Contract

Axis Contract

Frame solid paints the border, fill, focus ring, and invalid emphasis. ghost drops only the resting border and fill so an enclosing surface, such as a TRCard composer, owns the frame; focus and invalid emphasis are still painted by the field itself, so the surface does not have to repaint them. plain keeps only the invalid emphasis, for a card that sets focused for the whole group it frames: the ring is then painted once, around the group, instead of twice.

Axis	Contract
Frame	`solid` paints the border, fill, focus ring, and invalid emphasis. `ghost` drops only the resting border and fill so an enclosing surface, such as a `TRCard` composer, owns the frame; focus and invalid emphasis are still painted by the field itself, so the surface does not have to repaint them. `plain` keeps only the invalid emphasis, for a card that sets `focused` for the whole group it frames: the ring is then painted once, around the group, instead of twice.

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';

TRTextField(
  label: 'Rack name',
  controller: controller,
  validator: (value) =>
      value == null || value.isEmpty ? 'Required' : null,
  onSaved: save,
)

API

TextField preserves native Flutter state and callbacks while applying Tinyrack token defaults.