Text Field · Tinyrack Design System

Flutter의 controller, 포커스, 키보드, 자동 완성과 폼 생명 주기를 유지하며 텍스트를 입력받고 검증해요.

핵심 속성

속성	설명
프레임	`solid`는 테두리와 배경, 포커스 링, 오류 강조를 직접 그려요. `ghost`는 평상시 테두리와 배경만 없애서 `TRCard` 컴포저처럼 감싸는 표면이 프레임을 소유하게 해요. 포커스와 오류 강조는 필드가 계속 직접 그리니 표면이 다시 그릴 필요는 없어요. `plain`은 오류 강조만 남겨요. 감싸는 카드가 그룹 전체에 `focused`를 켜는 경우에 쓰면, 링이 두 번이 아니라 그룹 둘레에 한 번만 그려져요.

설치

패키지를 추가한 뒤 공개 라이브러리를 가져오세요.

flutter pub add tinyrack_ui

import 'package:tinyrack_ui/tinyrack_ui.dart';

플레이그라운드

Flutter 미리보기를 불러오는 중이에요

사용법

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는 Flutter의 네이티브 상태와 콜백을 유지하고 Tinyrack 토큰을 기본값으로 사용해요.