Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    TextInput

    Lets people enter a single line of text or a number, with the label, help text and error message tied to the field.

    Storybook
    Storybook
    Source
    Source

    When to use

    Section titled “When to use”

    Use TextInput for a short, free-form value: name, email, postal code, search text.

    When not to use

    Section titled “When not to use”
    • For multi-line text: Use a Textarea for descriptions and notes.
    • For a few fixed options: If the value is one of a few options, use a Select or a RadioGroup.
    • For dates: Use a DatePicker.

    Anatomy

    Section titled “Anatomy”

    Help or instruction text goes here

    1. Labelsays what the field asks for; it is bound to the input and always visible.
    2. Inputborder, background and corner radius; its height follows the chosen size.
    3. Help or error textexplains the format or the error; an error is added under the help text.

    Behaviour

    Section titled “Behaviour”
    • Clicking the label focuses the input.
    • On keyboard focus, the border turns to the focus colour and a 2 px focus ring is drawn; the transition takes 110 ms.
    • When error is set, the border turns to the danger colour and the message appears. The message stays until error is removed.
    • A disabled field does not take focus; the cursor shows that it cannot be edited.

    For keyboard, focus, contrast and screen reader details, see the Accessibility tab.

    Guidelines

    Section titled “Guidelines”

    Keep the label visible

    Section titled “Keep the label visible”

    A placeholder disappears as soon as people start typing, so they cannot check what the field asked for. Do not use a placeholder as the label.

    DoThe label sits above the field and stays visible while typing.
    Don'tA placeholder as label: the question disappears once typing starts.

    Say how to fix the error

    Section titled “Say how to fix the error”

    “Invalid value” does not tell people what to do. Name the expected format or what is missing.

    A postal code has 5 digits.
    DoWhat is missing and how to fix it is clear.
    Invalid value.
    Don'tA generic error leaves people guessing.

    State the format up front

    Section titled “State the format up front”

    People should avoid the error before they submit. If a format is expected, write it in the help text.

    Your 5-digit postal code.

    DoThe expected length is in the help text.
    Don'tThe format is only learnt from an error.

    Match the width to the value

    Section titled “Match the width to the value”

    The width hints how long the value should be. A full-width field for a postcode gives the wrong hint.

    DoA short field for a short value.
    Don'tA full-width field for a five-digit value.

    Content

    Section titled “Content”
    • Label: A short noun phrase, in sentence case, without a colon: “Postal code”.
    • Help text: One sentence. It gives the format or where to find the value.
    • Error text: Says what is wrong and how to fix it, without blame. “A postal code has 5 digits”, not “You made an invalid entry”.
    • Placeholder: Avoid it unless needed. If you use one, give an example value, not an instruction.
    English Turkish
    Email E-posta
    Postal code Posta kodu
    Full name Ad soyad
    A postal code has 5 digits. Posta kodu 5 haneli olmalı.
    This field is required. Bu alan zorunlu.

    Platforms

    Section titled “Platforms”
    • Desktop: Medium size. Forms are a single column; fields can be narrower to match the expected value.
    • Mobile: Large size and full width. The label stays above the field; do not place fields side by side.
    Section titled “Related components”
    • Button: The submit action of the form. Use the same size as the fields in the form.
    • Badge: Shows the status of a record; it is not used to show whether a field is valid.