Input

You can style the HTML <input> element to align with the Truffls brand by using the .tf-input class on the <input> element.

The <input> element includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

States

Default

Result

Live Editor

<FormField
    id="input-state-default"
    labelText="Input Label FOOO"
>
    <Input />
</FormField>

Error

Result

Live Editor

<FormField
    id="input-state-error"
    labelText="Input Label"
    hasError
>
    <Input  />
</FormField>

Disabled

Result

Live Editor

<FormField
    id="input-state-disabled"
    labelText="Input Label"
    disabled
>
    <Input />
</FormField>

Examples

Standalone

Result

Live Editor

<Input
    id="input-example-standalone"
    placeholder="Placeholder Text"
/>

Placeholder

Result

Live Editor

<FormField
    id="input-example-placeholder"
    labelText="Input Label"
>
    <Input placeholder="Placeholder Text" />
</FormField>

Assitive text

Result

Live Editor

<FormField
    id="input-assitive-text"
    labelText="Input Label"
    helpText="Assitive text goes here"
>
    <Input placeholder="Placeholder Text" />
</FormField>

Default value

Result

Live Editor

<FormField
    id="input-default-value"
    labelText="Input Label"
>
    <Input defaultValue="Default value" />
</FormField>

Prefilled value

This example uses value and onChange to showcase a prefilled value.

Result

Live Editor

function ExamplePrefilledValue() {
    const [ value, setValue ] = React.useState('Prefilled value');
    const onChange = (event) => {
        setValue(event.target.value);
    };
    return (
        <FormField
            id="input-prefilled-value"
            labelText="Input Label"
        >
            <Input
                value={value}
                onChange={onChange}
            />
        </FormField>
    );
}

External value change

This example shows how the field reacts if the value was changed from the outside and not by the field itself.

Result

Live Editor

function ExampleExternalValueChange() {
    const [ value, setValue ] = React.useState('');
    const onClickButton = () => {
        setValue('I\'m set from the outside!');
    };
    return (
        <React.Fragment>
            <FormField
                id="input-external-value-change"
                labelText="Input Label"
            >
                <Input value={value} />
            </FormField>
            <div style={{ padding: '0.5em', background: 'rgba(0, 0, 0, 0.1)', borderRadius: '0.125em' }}>
                <button type="button" onClick={onClickButton}>
                    Change value
                </button>
            </div>
        </React.Fragment>
    );
}

Error and assistive text

Result

Live Editor

<FormField
    id="input-error-assistive-text"
    labelText="Input Label"
    helpText="Assistive text goes here"
    hasError
>
    <Input placeholder="Placeholder Text" />
</FormField>

Icon on the right

Result

Live Editor

<FormField
    id="input-example-icon-right"
    labelText="Input Label"
    iconRight={(
        <svg viewBox="0 0 24 24">
            <path
                fillRule="evenodd"
                d="M11.8155844,6.41558442 C11.1283117,6.41558442 10.5714286,6.97272727 10.5714286,7.65974026 C10.5714286,8.34675325 11.1283117,8.9038961 11.8155844,8.9038961 C12.5028571,8.9038961 13.0597403,8.34675325 13.0597403,7.65974026 C13.0597403,6.97272727 12.5028571,6.41558442 11.8155844,6.41558442 M12.8981818,10.5714286 L12.9090909,10.5714286 L12.9090909,16.5454545 L14.2727273,16.5454545 C14.6672727,16.5454545 14.987013,16.8361039 14.987013,17.1948052 C14.987013,17.5535065 14.6672727,17.8441558 14.2727273,17.8441558 L9.98701299,17.8441558 C9.59246753,17.8441558 9.27272727,17.5535065 9.27272727,17.1948052 C9.27272727,16.8361039 9.59246753,16.5454545 9.98701299,16.5454545 L11.6103896,16.5454545 L11.6103896,11.3506494 L10.6012987,11.3506494 C10.2979221,11.3506494 10.0519481,11.06 10.0519481,10.7012987 C10.0519481,10.3425974 10.2979221,10.0519481 10.6012987,10.0519481 L12.3597403,10.0519481 C12.6254545,10.0519481 12.8472727,10.2750649 12.8981818,10.5714286 M12,20.75 C7.17642045,20.75 3.25,16.8235795 3.25,12 C3.25,7.17642045 7.17642045,3.25 12,3.25 C16.8232955,3.25 20.75,7.17642045 20.75,12 C20.75,16.8235795 16.8232955,20.75 12,20.75 M12,2 C6.48,2 2,6.48 2,12 C2,17.52 6.48,22 12,22 C17.52,22 22,17.52 22,12 C22,6.48 17.52,2 12,2"
            />
        </svg>
    )}
>
    <Input />
</FormField>

Icon button on the right

Result

Live Editor

<FormField
    id="input-example-icon-button-right"
    labelText="Input Label"
    iconRight={(
        <button type="button">
            <svg viewBox="0 0 24 24">
                <path
                    fillRule="evenodd"
                    d="M21.5266667,10.77 C22.152837,11.4685042 22.1539136,12.5260557 21.5291667,13.2258333 C19.3483334,15.6258334 15.745,18.1666667 12.1225,18.1666667 L11.8658333,18.1666667 C8.25583331,18.1666667 4.65166663,15.6258334 2.47333329,13.2266667 C1.84775784,12.5272521 1.84775784,11.4694146 2.47333329,10.77 C4.67749996,8.34583332 8.33333331,5.7808333 12,5.8333333 C15.6666667,5.78166664 19.3225,8.34499998 21.5266667,10.77 Z M8.16666665,12 C8.16666665,14.1170916 9.88290845,15.8333334 12,15.8333334 C14.1170916,15.8333334 15.8333334,14.1170916 15.8333334,12 C15.8333334,9.88290845 14.1170916,8.16666665 12,8.16666665 C9.88290845,8.16666665 8.16666665,9.88290845 8.16666665,12 Z M12,13.6666667 C11.0795254,13.6666667 10.3333333,12.9204746 10.3333333,12 C10.3333333,11.0795254 11.0795254,10.3333333 12,10.3333333 C12.9204746,10.3333333 13.6666667,11.0795254 13.6666667,12 C13.6666667,12.9204746 12.9204746,13.6666667 12,13.6666667 Z"
                />
            </svg>
        </button>
    )}
>
    <Input />
</FormField>

Icon on the left

Result

Live Editor

<FormField
    id="input-example-icon-left"
    labelText="Input Label"
    iconLeft={(
        <svg viewBox="0 0 24 24">
            <path
                fillRule="evenodd"
                d="M11.8155844,6.41558442 C11.1283117,6.41558442 10.5714286,6.97272727 10.5714286,7.65974026 C10.5714286,8.34675325 11.1283117,8.9038961 11.8155844,8.9038961 C12.5028571,8.9038961 13.0597403,8.34675325 13.0597403,7.65974026 C13.0597403,6.97272727 12.5028571,6.41558442 11.8155844,6.41558442 M12.8981818,10.5714286 L12.9090909,10.5714286 L12.9090909,16.5454545 L14.2727273,16.5454545 C14.6672727,16.5454545 14.987013,16.8361039 14.987013,17.1948052 C14.987013,17.5535065 14.6672727,17.8441558 14.2727273,17.8441558 L9.98701299,17.8441558 C9.59246753,17.8441558 9.27272727,17.5535065 9.27272727,17.1948052 C9.27272727,16.8361039 9.59246753,16.5454545 9.98701299,16.5454545 L11.6103896,16.5454545 L11.6103896,11.3506494 L10.6012987,11.3506494 C10.2979221,11.3506494 10.0519481,11.06 10.0519481,10.7012987 C10.0519481,10.3425974 10.2979221,10.0519481 10.6012987,10.0519481 L12.3597403,10.0519481 C12.6254545,10.0519481 12.8472727,10.2750649 12.8981818,10.5714286 M12,20.75 C7.17642045,20.75 3.25,16.8235795 3.25,12 C3.25,7.17642045 7.17642045,3.25 12,3.25 C16.8232955,3.25 20.75,7.17642045 20.75,12 C20.75,16.8235795 16.8232955,20.75 12,20.75 M12,2 C6.48,2 2,6.48 2,12 C2,17.52 6.48,22 12,22 C17.52,22 22,17.52 22,12 C22,6.48 17.52,2 12,2"
            />
        </svg>
    )}
>
    <Input />
</FormField>

Error and icon on the right

Result

Live Editor

<FormField
    id="input-example-error-icon-right"
    labelText="Input Label"
    hasError
    iconRight={(
        <svg viewBox="0 0 24 24">
            <path
                fillRule="evenodd"
                d="M11.8155844,6.41558442 C11.1283117,6.41558442 10.5714286,6.97272727 10.5714286,7.65974026 C10.5714286,8.34675325 11.1283117,8.9038961 11.8155844,8.9038961 C12.5028571,8.9038961 13.0597403,8.34675325 13.0597403,7.65974026 C13.0597403,6.97272727 12.5028571,6.41558442 11.8155844,6.41558442 M12.8981818,10.5714286 L12.9090909,10.5714286 L12.9090909,16.5454545 L14.2727273,16.5454545 C14.6672727,16.5454545 14.987013,16.8361039 14.987013,17.1948052 C14.987013,17.5535065 14.6672727,17.8441558 14.2727273,17.8441558 L9.98701299,17.8441558 C9.59246753,17.8441558 9.27272727,17.5535065 9.27272727,17.1948052 C9.27272727,16.8361039 9.59246753,16.5454545 9.98701299,16.5454545 L11.6103896,16.5454545 L11.6103896,11.3506494 L10.6012987,11.3506494 C10.2979221,11.3506494 10.0519481,11.06 10.0519481,10.7012987 C10.0519481,10.3425974 10.2979221,10.0519481 10.6012987,10.0519481 L12.3597403,10.0519481 C12.6254545,10.0519481 12.8472727,10.2750649 12.8981818,10.5714286 M12,20.75 C7.17642045,20.75 3.25,16.8235795 3.25,12 C3.25,7.17642045 7.17642045,3.25 12,3.25 C16.8232955,3.25 20.75,7.17642045 20.75,12 C20.75,16.8235795 16.8232955,20.75 12,20.75 M12,2 C6.48,2 2,6.48 2,12 C2,17.52 6.48,22 12,22 C17.52,22 22,17.52 22,12 C22,6.48 17.52,2 12,2"
            />
        </svg>
    )}
>
    <Input />
</FormField>

Multiline

Result

Live Editor

<FormField
    id="input-example-multiline"
    labelText="Input Label"
>
    <Input
        multiline
        minRows={3}
    />
</FormField>

States​

Default​

Error​

Disabled​

Examples​

Standalone​

Placeholder​

Assitive text​

Default value​

Prefilled value​

External value change​

Error and assistive text​

Icon on the right​

Icon button on the right​

Icon on the left​

Error and icon on the right​

Multiline​

States

Default

Error

Disabled

Examples

Standalone

Placeholder

Assitive text

Default value

Prefilled value

External value change

Error and assistive text

Icon on the right

Icon button on the right

Icon on the left

Error and icon on the right

Multiline