FormikTextArea

Basic Usage


import { FormikTextArea } from '@krakentech/coral-formik';
import { Button } from '@krakentech/coral';
import { Formik, Form } from 'formik';
 
<Formik
    initialValues={{ textarea: '' }}
    onSubmit={() => console.log('Submitted')}
    validationSchema={yup.object().shape({
        textarea: yup.string().required('This field is required'),
    })}
>
    <Form method="post">
        <FormikTextArea name="textarea" label="Textarea" />
        <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`
`id`	`string` The id of the input element. If unspecified, an id will be generated internally.
`label`	`string` The accessible label for the text area.
`name`	`string` The field name used on the POST request when the form is submitted.
`onBlur`	`FocusEventHandler<HTMLTextAreaElement>` Callback fired when the text area loses user focus.
`onChange`	`ChangeEventHandler<HTMLTextAreaElement>` Callback fired each time the user types in the text area.
`onFocus`	`FocusEventHandler<HTMLTextAreaElement>` Callback fired when the text area receives user focus.
`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`
`rows`	`number` Specifies the visible number of lines in a text area.	`3`
`theme`	`ResponsiveVariant<"base100" \| "secondary500">` The colourway applied to this component.	`base100`
`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<HTMLTextAreaElement> \| 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`