FormikTextField

Basic Usage


import { FormikTextField } from '@krakentech/coral-formik';
import { Button } from '@krakentech/coral';
import { Formik, Form } from 'formik';
 
<Formik
    initialValues={{ textfield: '' }}
    onSubmit={() => console.log('Submitted')}
    validationSchema={yup.object().shape({
        textfield: yup.string().required('This field is required'),
    })}
>
    <Form method="post">
        <FormikTextField name="textfield" label="Textfield" />
        <Button type="submit">Submit</Button>
    </Form>
</Formik>

Full API

Name	Type	Default
`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.
`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`
`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' };`
`validate`	`FieldValidator \| undefined` An optional field level validation function. See Formik docs for more details
`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`