StyledTextField

A wrapper around Flutter’s TextField that applies Sundial styling and adds a threshold-based character counter. Source: styled_text_field.dart.

StyledTextField(
  controller: controller,
  hintText: 'Enter text',
  maxLength: 250,              // default
  showCounterAfterChars: 200,  // counter appears at 200 chars
)

Variants

Constructor	Look
`StyledTextField(…)`	Filled — `surfaceElevated` fill, radius 16, no stroke
`StyledTextField.outlined(…)`	`surfaceBg` fill with a 2 px `surfaceHigh` stroke; focus recolors the stroke to `contrastSubtle`
`StyledTextField.underline(…)`	No fill; 3 px `contrastWeak` bottom underline; compact 8 px vertical padding

Character counter

The default Material counter is suppressed; Sundial’s own counter renders only once the text reaches showCounterAfterChars (default 200 of maxLength 250), as current/max in bodySmall / contrastMedium. Position it with counterAlignment:

enum TextFieldCharCounterAlignment { topLeft, topRight, bottomLeft, bottomRight }

API

Parameter	Type	Default
`controller`	`TextEditingController?`	—
`hintText`	`String?`	—
`maxLength`	`int`	`250`
`showCounterAfterChars`	`int`	`200`
`counterAlignment`	`TextFieldCharCounterAlignment`	`bottomRight`
`minLines` / `maxLines`	`int?`	—
`textCapitalization`	`TextCapitalization`	`sentences`
`textInputType`	`TextInputType`	`text`
`textAlign`	`TextAlign`	`left`
`textInputAction`	`TextInputAction?`	—
`closeKeyboardOnTapOutside`	`bool`	`true` — tapping outside unfocuses
`onChanged` / `onSubmitted`	callbacks	—
`focusNode` / `autofocus` / `enabled`	—	`false` / `true`
`prefixIcon` / `suffixIcon`	`Widget?`	—
`fillColor`	`Color?`	variant default (filled only)
`cursorColor`	`Color?`	theme accent
`borderRadius`	`double`	`16` (0 for underline)
`borderSide`	`BorderSide?`	— (default ctor only)
`style`	`TextStyle?`	`bodyLarge`

Other built-in behavior: hint in contrastWeak, prefix icon tinted contrastSubtle, and scrollPadding of 300 px so the field scrolls clear of the keyboard.

Tokens consumed

surfaceElevated, surfaceBg, surfaceHigh, contrastWeak, contrastSubtle, contrastMedium; typography bodyLarge, bodySmall.

Real usage

profile_settings.dart

StyledTextField(
  controller: monikerController,
  hintText: 'What should Ash call you?',
  textCapitalization: TextCapitalization.words,
)

For voice input, TextFieldWithTranscription (in lib/widgets/common/) wraps this component with a transcription button — see the common widgets catalogue.

Getting Started

Craft and Foundations

Brand

Design System

For Agents

StyledTextField

Variants

Character counter

API

Tokens consumed

Real usage