> ## Documentation Index
> Fetch the complete documentation index at: https://design.slingshotai.com/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> This site documents Sundial 2.0, the design system of the Ash mobile app (Flutter). For implementing UI: use the Design System pages — color/typography tokens (foundations/*), Flutter theming (theming/*), and component APIs (components/*) — as your reference; every value there mirrors the Dart source in lib/design_system/. The Philosophy pages (philosophy/*) are design rationale written for humans: consult them when making design decisions, not for API lookups. Golden rules: never hardcode colors or text styles — read tokens via context.colorTheme and context.textTheme; prefer the 2.0 semantic names (contentPrimary, surfaceComponent, accentSolid…) over legacy contrast*/surface* getters and over SundialRef primitives; the accent is a single pale lavender solid that takes dark content — never use accent fills as text, icons, or borders (use contentAccent / borderSelected); brand surfaces are mode-invariant and pair with the contentOnBrand* inks; check lib/design_system/components/ before building custom widgets.

# StyledTextField

> Themed TextField wrapper with a built-in character counter — filled, outlined, and underline variants

A wrapper around Flutter's `TextField` that applies Sundial styling and adds a **threshold-based character counter**. Source: [`styled_text_field.dart`](https://github.com/slingshot-ai/ash-mobile-app/blob/main/lib/design_system/components/styled_text_field.dart).

```dart theme={null}
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`:

```dart theme={null}
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

```dart profile_settings.dart theme={null}
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](https://design.slingshotai.com/appendix/common-widgets.md).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.