TextField

This component allows users to write or edit text.

Basic Usage


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

Text field

Properties

defaultValue


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

Text field

disabled


<TextField label="Text field" disabled />

Text field

endIcon


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

Text field

error / errorMessage


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

Text field

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" />

Number field

optional


<TextField label="Text field" optional />

Text field (optional)

placeholder


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

Text field

startIcon


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

Text field

step


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

Number field

theme


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

Number field

type


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

Number field

value


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

Text field

disableScroll


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

Number Input (Scroll disabled)

Event Handling


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

Responsiveness


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

Text field

Full API

Name	Type	Default
`defaultValue`	`string` If set, a default value will be set for the input.
`disabled`	`boolean` If `true`, the component will be disabled and not respond to user interactions.	`false`
`disableScroll`	`boolean` Should the field blur on wheel events, to prevent an input change? This is useful for number fields.	`false`
`endIcon`	`ReactNode` The icon displayed at the end of the TextField.
`error`	`boolean` If `true`, the component will have error styling set.
`errorMessage`	`string` If set, the `ErrorMessage` component will be rendered below the input with this text.	`'Invalid input'`
`id`	`string` The id of the input element. If unspecified, an id will be generated internally.
`inputProps`	`Omit<InputHTMLAttributes<HTMLInputElement>, "className" \| "style">` Additional props to be passed directly to the input element, e.g. `pattern`.
`label`	`string` The accessible label for the text field.
`name`	`string` The field name used on the POST request when the form is submitted.
`onBlur`	`FocusEventHandler<HTMLInputElement>` Callback fired when the text field loses user focus.
`onChange`	`ChangeEventHandler<HTMLInputElement>` Callback fired each time the user types in the text field.
`onFocus`	`FocusEventHandler<HTMLInputElement>` Callback fired when the text field receives user focus.
`min`	`string \| number \| undefined` The min attribute specifies the minimum value for a number field.
`max`	`string \| number \| undefined` The max attribute specifies the maximum value for a number field.
`placeholder`	`string` Optionally displays a text hint in the field, before it is populated.
`optional`	`boolean` Add an optional flag to the label for this field (controlled by https://coral-oe.vercel.app/?path=/docs/guides-configuration—docs#overrides-optional-indicator optionalIndicator). This should be set to true if you have set this field to be optional in your validation schema.	`false`
`startIcon`	`ReactNode` The icon displayed at the start of the TextField.
`step`	`string \| number \| undefined` The `step` attribute specifies the interval between legal numbers in an `input` element. For example, if `step="3"`, legal numbers could be -3, 0, 3, 6, etc.
`type`	`HTMLInputTypeAttribute` The HTML input type of this text field.	`text`
`value`	`string \| null` `value` should be supplied by the parent component to control the value of the TextArea input.
`theme`	`ResponsiveVariant<ConditionalValue<"secondary500" \| "base100"> \| undefined>` The colourway applied to this component.	`base100`
`autocomplete`	`AutoFill` The HTML autocomplete attribute lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field.	`on`
`attributes`	`Attributes` This prop can be used to pass HTML attributes directly to the component. We currently allow passing `data-` and `aria-` attributes and the `id`. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content. Example usage: `AttributesProps: { 'id': 'close-button', 'aria-label': 'Close button', 'data-testid': 'close-button' };`
`ref`	`Ref<HTMLInputElement> \| undefined` Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`key`	`Key \| null \| undefined`

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