Sakuga Back to Sakuga
Theme
Sound
Jump to a component

Core · Forms

TextField

A labelled text input or text area. The label sits above, the hint below. Use highlight for a value that changed while editing.

@anicanon/sakuga/uiv1.0Used onWeb · iOS · Android

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Coming soon

TextField for iOS is in the roughs. The tokens it will read are the ones on this page, the same on every platform.

Android

Coming soon

TextField for Android is in the roughs. The tokens it will read are the ones on this page, the same on every platform.

Use it for
Words a person types, on one line or in a text area: a name, a description, a search.
Not for

Guidelines

Motion: state changes fade with motion-fast; entrances use motion-base and ease-enter.

TextFieldExample.jsxReact
import { TextField } from '@anicanon/sakuga/ui';

export default function TextFieldExample() {
  return (
    <>
      <TextField label="Name" value="Plaid overshirt" />
      <TextField
        label="Describe it"
        multiline
        value="An open plaid overshirt over a black tee."
        hint="Garments, colours, materials."
      />
    </>
  );
}

PropsTextFieldProps

icon
IconName
Leading icon for single-line fields, e.g. search.
value
string
Controlled text. Update it through onChange, or use readOnly.
defaultValue
string
Initial text for an uncontrolled field.
placeholder
string
Without a label it names the field (search fields).
multiline
boolean
A text area.
rows
number
minHeight
number
highlight
boolean
Accent edge for a changed value.
type
string
The input's type, "text" by default.
required
boolean
Read as required.
readOnly
boolean
id
string
onChange
(text: string) => void
Called with the text as it is typed.

From FieldShellProps

label
string
Set it, or the placeholder becomes the accessible name (search fields).
hint
string
One line under the control.
optional
boolean
Adds " · optional".
help
{ title?: string; text: ReactNode; }
Adds a FieldHelp tooltip.
maxWidth
number
className
string

An IconName is any of the names Icon lists.

TextFieldExample.swiftiOS · coming soon
TextFieldExample.ktAndroid · coming soon

Each token reads a role, and the role lands on a value in each theme. Change the role and every component that reads it follows.

Colour

field-labelTextField and Select: label.
text-mutedneutral-600#5c5b67
text-mutedneutral-400#a3a3a7
field-hintTextField and Select: hint under the control.
text-mutedneutral-600#5c5b67
text-mutedneutral-400#a3a3a7
field-bgTextField and Select: control fill.
bg-canvasneutral-50#f6f6f8
bg-canvasneutral-950#07070a
field-borderTextField and Select: control edge.
border-controlshade-a52rgba(11,10,16,0.52)
border-controlwhite-a45rgba(255,255,255,0.45)
field-fgTextField and Select: value.
text-primaryneutral-925#0b0a10
text-primaryneutral-0#ffffff
field-placeholderTextField and Select: placeholder.
text-mutedneutral-600#5c5b67
text-mutedneutral-400#a3a3a7
field-highlightTextField: a field that changed or needs attention.
accentcamellia-600#c2335f
accentcamellia-400#f4779f

Space and shape

field-gap
gap-sm
6px
field-label-gap
gap-sm
6px
Aa
field-control-min-height
size-target
44px
field-control-padding-x
inset-md
12px
field-control-radius
radius-sm
8px
field-control-inset-ring-width
line-hairline
1px
field-control-focus-inset-ring-width
line-strong
2px
field-control-area-padding
inset-md
12px
field-control-area-min-height
its own value
76px
field-control-highlight-inset-ring-width
line-strong
2px
field-wrap-icon-left
inset-md
12px
field-wrap-control-padding-left
its own value
calc(12px + 16px + 8px)
field-icon-size
icon-size-sm
16px
field-help-target-size
its own value
calc(20px + 2 * 2px)
field-forced-edge-width
line-hairline
1px
field-forced-focus-width
line-strong
2px

Type

field-label-font
text-micro
700 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
field-opt-font-weight
weight-medium
500
field-control-font
text-body
400 14px/20px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
field-control-placeholder-font-weight
weight-regular
400
field-control-area-font-weight
weight-regular
400
field-control-area-line-height
text-body-line-height
20px
field-hint-font
text-small
500 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

Motion

field-control-duration
motion-fast
160ms
field-control-easing
ease-standard
cubic-bezier(0.2, 0, 0, 1)

Checked automatically with axe-core 4.11.4 against WCAG 2.2 A and AA, on the live preview above, in light and dark, on 26 October 2026.

Result
No issues found, in light or in dark.
By design
A text input (a text area with multiline) that Tab reaches and that takes typing, named by the words of label (with "optional"), or by placeholder without one, and described by hint; required adds "required", and readOnly makes it read-only. onChange gets the text as it is typed. The icon is hidden.
Not tested
The automated check doesn't test keyboard use, focus order or what a screen reader says. The lines above are the design system's own account of them.