Components
Field
테두리 입력 셸.
↵
import { Field } from '@coldsurfers/surf-ui/primitives'export default function Example() { return ( <div style={{ display: 'grid', gap: 12, width: '100%', maxWidth: 420 }}> <Field placeholder="아티스트나 장르 하나…" trailing="↵" /> <Field placeholder="비활성" disabled /> </div> )}trailing 은 우측 슬롯입니다 — ↵ 힌트나 작은 버튼이 들어갑니다.
포커스되면 테두리가 accent 1.5px 로 바뀝니다(라이트 표면).
tone="dark" 는 다크 밴드(color.strong) 위에 앉히는 변형입니다. 기본은 라이트 표면입니다.
ref 는 내부 실제 <input> 을 그대로 노출합니다 — react-hook-form 의 defaultValues 호환입니다.
Props
Prop
Type
그 밖의 InputHTMLAttributes<HTMLInputElement> 속성은 루트 엘리먼트로 그대로 통과한다.