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

    Installation

    Section titled “Installation”
    Package
    @bigbang/ui
    Import
    import { Field } from '@bigbang/ui';
    Source
    Field.tsx
    Storybook
    Field · Playground

    Field is in the @bigbang/ui package.

    import { Field } from '@bigbang/ui';
    

    <Field label="Field label" description="Help text goes here." error={errors}>
      <Field.Control value={value} onValueChange={setValue} />
      <Field.Counter value={value} max={20} />
    </Field>;

    The part prop types are exported too: FieldRootProps, FieldLabelProps, FieldControlProps, FieldDescriptionProps, FieldErrorProps, FieldCounterProps, FieldLegendProps.

    Props

    Section titled “Props”
    required
    Description
    The value is required: the control gets required and aria-required, and the label is marked when necessityIndicator is 'required'.
    Type
    boolean
    Default
    false
    necessityIndicator
    Description
    Which fields a form marks. 'required' adds * and a visually hidden "zorunlu" or "required" to required fields; 'optional' adds "(isteğe bağlı)" or "(optional)" to the other fields. A form uses one convention: mark the minority.
    Type
    'optional' | 'required'
    Default
    'required'
    labelRequired
    Description
    The visible label, bound to the control with <label>. A placeholder does not replace it.
    Type
    string
    description
    Description
    Help text under the control, linked with aria-describedby before the error.
    Type
    ReactNode
    error
    Description
    When set, the field is invalid and the message is read with the control. Pass a list to show several messages; an empty list or string leaves the field valid.
    Type
    string | readonly string[]
    invalid
    Description
    Marks the field invalid without a message, for example when the message is in an error summary.
    Type
    boolean
    Default
    false
    disabled
    Description
    Disables the field and its label; the value is not submitted with the form.
    Type
    boolean
    Default
    false
    readOnly
    Description
    Shown as data-readonly on the field for styling; set readOnly on the control itself.
    Type
    boolean
    Default
    false
    name
    Description
    Field name used when the form is submitted.
    Type
    string
    className
    Description
    Added to the root element; use it for layout only.
    Type
    string
    childrenRequired
    Description
    The control, usually Field.Control or a library control's own parts.
    Type
    ReactNode

    Parts

    Section titled “Parts”
    • Field.Root, Field.Label, Field.Description, Field.Error: to build your own layout.
    • Field.Control: an <input> with the TextInput look; wire your own control through render, replace the look with className.
    • Field.Counter: takes value (text) and max (number).
    • Field.Set: a <fieldset> around related fields, 16 px apart (12 px around a CheckboxGroup or RadioGroup); name it with Field.Legend.
    • Field.Legend: variant legend (16 px medium, text.label-lg) or label (14 px, text.label-md); 6 px below it.
    • Field.Group: a column of fields 20 px apart; a group inside a group uses 16 px.
    • Field.Separator: a 1 px color-border-subtle line between parts of a form, with optional centred text such as “or”.

    Data attributes

    Section titled “Data attributes”
    • data-component="field": on the root element.
    • data-part: label, control, description, error, counter, necessity, field-set, field-legend, field-group, field-separator.
    • data-state (counter): under, near, over.
    • data-required, data-readonly, data-invalid, data-disabled: on the root element.