labelstringrenderInput(props: { id: string; 'aria-describedby': string | undefined; 'aria-labelledby': string; disabled: boolean; invalid: boolean; required: boolean; }) => ReactElementdisabled?booleanfalseerrorText?stringhelpText?stringinvalid?booleanfalselabelAs?'label'|'legend''label'ref?Ref<HTMLElement>Please enter a valid email address.
This field is required.
required?booleanfalse| Prop | Type | Default |
|---|---|---|
label | string | - |
renderInput | (props: { id: string; 'aria-describedby': string | undefined; 'aria-labelledby': string; disabled: boolean; invalid: boolean; required: boolean; }) => ReactElement | - |
disabled? | boolean | false |
errorText? | string | - |
helpText? | string | - |
invalid? | boolean | false |
labelAs? | 'label'|'legend' |
'label'ref? | Ref<HTMLElement> | - |
required? | boolean | false |
import { FormControl } from '@k8ordo/ui';<FormControl
label="Name"
renderInput={(props) => (
<TextField
{...props}
placeholder="Enter your name"
/>
)}
/><FormControl
helpText="Please enter a valid email address."
label="Email"
renderInput={(props) => (
<TextField
{...props}
placeholder="[email protected]"
/>
)}
/><FormControl
errorText="This field is required."
invalid
label="Email"
renderInput={(props) => (
<TextField {...props} />
)}
/><FormControl
required
label="Username"
renderInput={(props) => (
<TextField
{...props}
placeholder="Required field"
/>
)}
/><FormControl
disabled
label="Username"
renderInput={(props) => (
<TextField
{...props}
placeholder="Disabled field"
/>
)}
/>