Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    Field

    The wrapper that wires label, control, help text, error and counter by ids for any form control.

    Storybook
    Storybook
    Source
    Source

    Added

    • error also takes a list of messages; several messages render as a bulleted list, an empty list leaves the field valid.
    • Field.Counter: characters used out of the limit; polite announcement from 80 %, danger colour over the limit.
    • The ui.field.counterRemaining and ui.field.counterOver strings.
    • A bare Field.Control takes the TextInput look.
    • The error text appears with motion.fieldMessage.
    • The part prop types are exported: FieldRootProps, FieldLabelProps, FieldControlProps, FieldDescriptionProps, FieldErrorProps, FieldCounterProps, FieldLegendProps.

    Changed

    • The box gets a hairline shadow; the focus outline is drawn 2 px outside the box; an invalid box gets a 2 px danger halo.