Text input

Text

draft 
<div class="ds-block">

    <form class="ds-form">

        <div class="ds-form-group">
            <label class="ds-label" for="firstname">Name</label>
            <input class="ds-text-input" type="text" id="firstname" placeholder="Your name"/>
        </div>

    </form>

</div>

Required

draft

Add required attribute to input and <abbr class="ds-label__required" title="required">*</abbr> tag after label text

<div class="ds-block">

    <form class="ds-form">

        <div class="ds-form-group">
            <label class="ds-label" for="firstname">Name <abbr class="ds-label__required" title="required">*</abbr></label>
            <input class="ds-text-input" type="text" id="firstname" placeholder="Your name" required/>
        </div>

    </form>

</div>

Hint Text

draft 
<div class="ds-block">

    <form class="ds-form">

        <div class="ds-form-group">
            <label class="ds-label" for="firstname">Name</label>
            <input class="ds-text-input" type="text" id="firstname" placeholder="Your name" aria-describedby="text-hint"/>
            <small class="ds-hint" id="text-hint">We'll never share your details with anyone else.</small>
        </div>
    
    </form>

</div>

Disabled text input

draft

Disabled input elements are unusable and can not be clicked. This prevents a user from interacting with the input element until another action is complete. Disabled input elements in a form will not be submitted.

<div class="ds-block">

    <form class="ds-form">

        <div class="ds-form-group">
            <label class="ds-label" for="firstname">Name</label>
            <input class="ds-text-input" type="text" id="firstname" placeholder="Your name" disabled/>
        </div>

    </form>

</div>

Read only

draft

Read only field cannot be edited by the user. Its value can, however, still be changed by JavaScript. Read only input elements in a form will be submitted.

<div class="ds-block">

    <form class="ds-form">

        <div class="ds-form-group">
            <label class="ds-label" for="firstname">Name</label>
            <input class="ds-text-input" type="text" id="firstname" placeholder="Your name"  readonly/>
        </div>

    </form>

</div>

Text input invalid

draft

Invalid state

<div class="ds-block">

    <form class="ds-form">

        <div class="ds-form-group">
            <label class="ds-label" for="firstname">Name</label>
            <input class="ds-text-input ds-text-input--invalid" type="text" id="firstname" placeholder="Your name"  aria-describedby="text-hint"/>
            <small class="ds-hint" id="text-hint">We'll never share your details with anyone else.</small>
            <small class="ds-hint ds-hint--invalid">Invalid message</small>
        </div>

    </form>

</div>

Text input valid

draft

Valid state

<div class="ds-block">

    <form class="ds-form">

        <div class="ds-form-group">
            <label class="ds-label" for="firstname">Name</label>
            <input class="ds-text-input ds-text-input--valid" type="text" id="firstname" placeholder="Your name"  aria-describedby="text-hint"/>
            <small class="ds-hint" id="text-hint">We'll never share your details with anyone else.</small>
            <small class="ds-hint ds-hint--valid">Succesfully message</small>
        </div>

    </form>

</div>