Theme

Sound

Jump to a component

Core · Forms

Field

Field puts the form's label over a control that does not carry its own (a segmented control, chips, a group of options), with an optional hint under it.

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

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Coming soon

Field 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

Field 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: The label and hint over a control that has none of its own: a segmented control, chips, a group of options, swatches.
Not for: Typed words, which carry their own labelTextField
A list choice, which carries its own labelSelect
Explaining a field on hover or focusFieldHelp
A label over a strip or a group inside a panelSectionHeader

Guidelines

It uses the same label and hint as TextField and Select, so a form reads as one column whatever the control.
optional adds "· optional" to the label.

FieldExample.jsxReact

import { Field, SegmentedControl } from '@anicanon/sakuga/ui';

export default function FieldExample() {
  return (
    <Field
      label="Story Map"
      hint="Free: the script isn’t checked against the story. You can switch later."
    >
      <SegmentedControl
        label="Story Map mode"
        value="Free"
        options={[
          { label: 'Story Map', value: 'Story Map' },
          { label: 'Free', value: 'Free' },
        ]}
      />
    </Field>
  );
}

Props`FieldProps`

labelrequired

string

childrenrequired

ReactNode

hint

string

optional

boolean

id

string

className

string

FieldExample.swiftiOS · coming soon

FieldExample.ktAndroid · coming soon

It has no tokens of its own: it draws with TextField’s, listed here.

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

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)

Field

Guidelines

PropsFieldProps

Colour

Space and shape

Type

Motion

Props`FieldProps`