Theme

Sound

Jump to a component

Core · Forms

FieldHelp

FieldHelp is the ⓘ beside a field name. It explains the field in one bold line plus examples, on hover or keyboard focus.

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

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Coming soon

FieldHelp 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

FieldHelp 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 ⓘ beside a field's name that says what the field controls, in one bold line and examples: shot type, depth of field.
Not for: Context everyone should see, kept on the pageNotice
A hover card on a mention or a small formPopover
An action shown as a glyph aloneIconButton

Guidelines

Use it on every Studio control a newcomer might not know (shot type, depth of field, Story Map).
Write the first line as what the field controls, then "Examples:".
It is a real button, so keyboard users reach it.

FieldHelpExample.jsxReact

import { FieldHelp } from '@anicanon/sakuga/ui';

export default function FieldHelpExample() {
  return (
    <>
      Depth of field
      <FieldHelp
        label="Depth of field"
        title="Controls how much of the frame appears in focus."
        open
      >
        Examples: shallow isolates the character, deep keeps foreground and
        background sharp.
      </FieldHelp>
    </>
  );
}

Props`FieldHelpProps`

labelrequired

string

childrenrequired

ReactNode

title

string

open

boolean

FieldHelpExample.swiftiOS · coming soon

FieldHelpExample.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

tooltip-bgFieldHelp: tooltip surface.

bg-surface-raisedneutral-100#ececf0

bg-surface-raisedneutral-875#1a1a21

tooltip-fgFieldHelp: tooltip text.

text-primaryneutral-925#0b0a10

text-primaryneutral-0#ffffff

tooltip-borderFieldHelp: tooltip edge.

border-dividershade-a12rgba(11,10,16,0.12)

border-dividerwhite-a12rgba(255,255,255,0.12)

field-help-fgFieldHelp: the info glyph.

text-mutedneutral-600#5c5b67

text-mutedneutral-400#a3a3a7

Space and shape

field-help-button-active-scale

scale-press-sm

.94

field-help-button-size

its own value

20px

field-help-button-focus-outline-width

line-strong

2px

field-help-button-focus-outline-offset

focus-ring-offset

3px

field-help-tip-bottom

inset-sm

8px

field-help-tip-width

its own value

240px

field-help-tip-padding

inset-md

12px

field-help-tip-radius

radius-md

12px

field-help-tip-inset-ring-width

line-hairline

1px

field-help-tip-strong-margin-bottom

gap-xs

4px

field-help-icon-size

icon-size-sm

16px

Type

field-help-tip-font

text-small

500 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

field-help-tip-strong-font-weight

weight-bold

700

Motion

field-help-button-press-duration

motion-fast

160ms

field-help-button-press-easing

ease-standard

cubic-bezier(0.2, 0, 0, 1)

field-help-button-active-duration

motion-instant

100ms

field-help-tip-translate-y

motion-nudge

4px

field-help-tip-duration

motion-instant

100ms

field-help-tip-easing

ease-exit

cubic-bezier(0.3, 0, 1, 1)

field-help-tip-hover-duration

motion-fast

160ms

field-help-tip-hover-easing

ease-enter

cubic-bezier(0, 0, 0, 1)