TextField

This component allows users to write or edit text.

Basic Usage

import { TextField } from '@krakentech/coral';
 
<TextField label="Text field" />;

Properties

defaultValue

<TextField label="Text field" defaultValue="Roger Nesbit" />

disabled

<TextField label="Text field" disabled />

endIcon

<TextField label="Text field" endIcon={<IconCircleQuestionFilled />} />

error / errorMessage

<TextField label="Text field" error errorMessage="Please fill out this field" />

min / max

Note: There is no validation on this field so you will be able to type a value greater than 10 or less than 5, however, if you use the built-in number incrementers you cannot select a value greater than 10 or a value lower than 5.

<TextField label="Number field" type="number" min="5" max="10" />

optional

<TextField label="Text field" optional />

placeholder

<TextField label="Text field" placeholder="Placeholder text" />

startIcon

<TextField label="Text field" startIcon={<IconCircleQuestionFilled />} />

step

<TextField label="Number field" type="number" step="5" />

theme

<TextField label="Number field" theme="base100" />
<TextField label="Number field" theme="secondary500" />

type

<TextField label="Number field" type="number" />

value

const [inputValue, setInputValue] = useState('Some value');
 
<TextField label="Text field" value={inputValue} />
 
<Button
    size="small"
    onClick={() => setInputValue('A different value')}
>
    Change Value
</Button>

disableScroll

<TextField label="Number Input (Scroll disabled)" type="number" disableScroll />

Event Handling

<TextField
    label="Text field"
    onBlur={() => {}}
    onFocus={() => {}}
    onChange={(e) => {}}
/>

Responsiveness

<TextField label="Text field" theme="base100" lg={{ theme: 'secondary500' }} />

Full API

Design

Good to know

Choose a text field if you want to indicate to a user that they need to or can input information. A text field should make it clear what information is being requested and address any errors related to that info.

Why don’t we indicate mandatory fields?

It is a better user experience when forms are explicit about optional fields by labelling them so, that way the user can be reassured they can proceed without completing it. Therefore in Coral our mandatory fields are the default and optional fields are marked as such.

Why do I need to use a different text field for Hemocyanin and Siphon, they look the same?

When the text field is interacted with the label moves up to the top of the field. This label now sits within a label container which gives the illusion of the cut out at the top. This container matches the colour of the background you’re using, therefore you need to use the text field corresponding to the background colour it is going on.

Customisation

Our text field component has a couple variations you can play with. Our components default with all properties turned on, however you can choose to toggle on and off the following:

• Optional label
• Icons

Component breakdown

• Corner radius: 12px
• Border: 2px
• Input text: Body 1
• Label container: Caption text
• Left padding: 16px | Right padding: 80px
• Horizontal padding: 16px | Vertical padding: 16px