FormControl

Twitter Username@This is a neutral caption

import { FormControl, TextInput } from '@tulsa/core';

<FormControl>
    <FormControl.Label>Twitter Username</FormControl.Label>
    <TextInput leadingVisual={"@"} />
    <FormControl.Caption>This is a neutral caption</FormControl.Caption>
</FormControl>

Props

Name	Type	Description	Default
status	'neutral' | 'success' | 'error'	Controls the look and feel of the form	neutral
id	string	Manually sets the id and accessibility of the `for` attribute of the form
as	T	Controls the root element that is used by the FormControl. Can be an HTML element string or a React component	div

Native props are forwarded to the root component.

Examples

Success and Error

Twitter Username@This is an errored caption

Twitter Username@This is successful caption

Enter a DescriptionThis is successful caption

<FormControl status='error'>
    <FormControl.Label>Twitter Username</FormControl.Label>
    <TextInput leadingVisual={"@"} />
    <FormControl.Caption>This is an errored caption</FormControl.Caption>
</FormControl>

<FormControl status='success'>
    <FormControl.Label>Twitter Username</FormControl.Label>
    <TextInput leadingVisual={"@"} />
    <FormControl.Caption>This is successful caption</FormControl.Caption>
</FormControl>

<FormControl status='success'>
    <FormControl.Label>Enter a Description</FormControl.Label>
    <TextArea />
    <FormControl.Caption>This is successful caption</FormControl.Caption>
</FormControl>

FormControl.Label

Props

Name	Type	Description	Default
children	string | React.ReactElement	Content of the associated form's label

Native props are forwarded to the root component.

FormControl.Caption

Props

Name	Type	Description	Default
children	string | React.ReactElement	Content of the associated form's caption

Native props are forwarded to the root component.