Text field

1<AppTextField label="Location" placeholder="Where are you observing from?" glyph="pin" />2<AppTextField label="Email" type="email" error="This value is not valid" />3<AppTextField label="Notes" multiline />

1/**2 * A text field on the glass material: a label above, the control with an optional leading glyph, and a line of help3 * or error text below. Focus draws the tone on the border. `multiline` makes it a textarea. Pass `value` and4 * `onChange` to control it, or `defaultValue` to let it keep its own text.5 */6export function AppTextField({7  label,8  type = "text",9  placeholder,10  help,11  error,12  glyph,13  size,14  tone = "deep-space",15  multiline,16  value,17  defaultValue,18  onChange,19  disabled,20}: {21  label: string;22  type?: "text" | "search" | "email" | "number";23  placeholder?: string;24  help?: string;25  error?: string;26  glyph?: GlyphName;27  size?: "sm";28  tone?: Tone;29  multiline?: boolean;30  value?: string;31  defaultValue?: string;32  onChange?: (value: string) => void;33  disabled?: boolean;34}) {35  const state = value === undefined ? { defaultValue } : { value };36  const common = {37    placeholder,38    disabled,39    "aria-invalid": error ? true : undefined,40    onChange: onChange ? (e: { target: { value: string } }) => onChange(e.target.value) : undefined,41    ...state,42  };43  const cls = ["app-ui app-field", size && `is-${size}`, error && "is-error"].filter(Boolean).join(" ");44  return (45    <label className={cls} style={{ ["--tone" as string]: `var(--color-${TONE_STOP[tone]})` }}>46      <span className="app-label-md">{label}</span>47      <span className="app-field-control">48        {glyph && <Glyph name={glyph} />}49        {multiline ? <textarea rows={3} {...common} /> : <input type={type} {...common} />}50      </span>51      {(error || help) && <span className="app-label-sm app-field-help">{error ?? help}</span>}52    </label>53  );54}

1.app-field {2  --tone: var(--color-deep-space-200);3  display: grid;4  gap: var(--spacing-f5);5  min-width: 0;6  width: min(100%, var(--container-f377));7}89.app-field-control {10  display: flex;11  align-items: center;12  gap: var(--spacing-f8);13  min-height: var(--spacing-f55);14  padding: 0 var(--spacing-f13);15  border-radius: var(--radius-f13);16  border: var(--spacing-f1) solid var(--hair-strong);17  background: var(--sheen), var(--fill);18  box-shadow: var(--highlight);19  box-sizing: border-box;20  transition: border-color 0.3s, box-shadow 0.3s;21}2223.app-field.is-sm .app-field-control { min-height: var(--spacing-f34); padding: 0 var(--spacing-f8); border-radius: var(--radius-f8); }2425.app-field-control:focus-within {26  border-color: var(--tone);27  box-shadow: var(--highlight), 0 0 0 var(--spacing-f3) color-mix(in srgb, var(--tone) var(--mag-3), transparent);28}2930.app-field.is-error .app-field-control { border-color: var(--c-error); }3132.app-field svg { flex: none; width: var(--spacing-f21); height: var(--spacing-f21); fill: var(--c-muted); }3334.app-field-help { margin: 0; }

1AstrGlassTextField(2label: 'Location',3hintText: 'Where are you observing from?',4icon: Icons.place,5helperText: 'Shown under the field',6onChanged: (String text) {},7)

1/// A text field on the glass material: a label above, the control with an2/// optional leading icon, and a line of help or error text below. The control3/// is [AstrSize.control] tall (55), or [AstrSize.controlCompact] (34); focus4/// draws [tone] on the border.5class AstrGlassTextField extends StatelessWidget {6  const AstrGlassTextField({7    super.key,8    required this.label,9    this.controller,10    this.hintText,11    this.helperText,12    this.errorText,13    this.icon,14    this.tone = AstrTone.deepSpace,15    this.compact = false,16    this.maxLines = 1,17    this.enabled = true,18    this.onChanged,19    this.keyboardType,20  });2122  final String label;23  final TextEditingController? controller;24  final String? hintText;25  final String? helperText;26  final String? errorText;27  final IconData? icon;28  final AstrTone tone;29  final bool compact;3031  /// 1 for a single line, more for a multiline field.32  final int maxLines;33  final bool enabled;34  final ValueChanged<String>? onChanged;35  final TextInputType? keyboardType;3637  @override38  Widget build(BuildContext context) {39    final Color text = AstrColors.spaceGrey[50]!;40    final Color muted = AstrColors.spaceGrey[300]!;41    final Color error = AstrColors.oxygenAirglow[400]!;42    final double radius = compact ? AstrRadius.f8 : AstrRadius.f13;4344    OutlineInputBorder border(Color color) => OutlineInputBorder(45          borderRadius: BorderRadius.circular(radius),46          borderSide: BorderSide(color: color),47        );4849    return Opacity(50      opacity: enabled ? 1 : Mag.m2,51      child: Column(52        crossAxisAlignment: CrossAxisAlignment.start,53        children: <Widget>[54          Text(55            label,56            style: TextStyle(fontFamily: 'Satoshi', fontSize: AstrType.sNeg1, fontWeight: FontWeight.w500, color: text),57          ),58          const SizedBox(height: AstrSpace.f5),59          TextField(60            controller: controller,61            enabled: enabled,62            onChanged: onChanged,63            keyboardType: keyboardType,64            maxLines: maxLines,65            style: TextStyle(fontSize: compact ? AstrType.sNeg1 : AstrType.s0, color: text),66            cursorColor: tone.color,67            decoration: InputDecoration(68              hintText: hintText,69              hintStyle: TextStyle(color: muted.withValues(alpha: Mag.m1)),70              helperText: helperText,71              helperStyle: TextStyle(fontSize: AstrType.sNeg2, color: muted),72              errorText: errorText,73              errorStyle: TextStyle(fontSize: AstrType.sNeg2, color: error),74              prefixIcon: icon == null ? null : Icon(icon, size: compact ? AstrSpace.f13 : AstrSize.icon, color: muted),75              filled: true,76              fillColor: text.withValues(alpha: Mag.m7),77              constraints: BoxConstraints(minHeight: compact ? AstrSize.controlCompact : AstrSize.control),78              contentPadding: EdgeInsets.symmetric(horizontal: compact ? AstrSpace.f8 : AstrSpace.f13, vertical: AstrSpace.f13),79              enabledBorder: border(text.withValues(alpha: Mag.m5)),80              focusedBorder: border(tone.color),81              errorBorder: border(error),82              focusedErrorBorder: border(error),83              disabledBorder: border(text.withValues(alpha: Mag.m5)),84            ),85          ),86        ],87      ),88    );89  }90}