CvcInput
Install
yarn add @ntds/text-inputImport
import { CvcInput } from '@ntds/text-input';Props
| Prop | Type | Default | Description |
|---|---|---|---|
headingLevel? | HeadingLevel | — | The heading level to use in-context. The level used will not change the appearance or style. 1 = <h1> 2 = <h2> ... and so on .. |
id? | string | — | The id of the CvcInput |
value? | string | — | The value of the CvcInput |
setValue? | (value: string) => void | — | Pass your setter from useState() directly here |
error? | string | boolean | ((id: string) => ReactNode) | — | Mark the input as invalid both visually and semantically Given as a `string`: Will render the message inside a Message component under the input Will not use aria-live Given as a `ReactNode`: Will render the content with margin dictated by the CvcInput Use the `Message` component from @ntds /message |
errorAriaLiveAssertive? | boolean | — | Override aria live for error message |
accessibleToggleButtonLabel? | string | — | Overwrite aria-label for visibilityToggle |
hideLabels? | boolean | — | Whether or not the labels and description-buttons should be included. |
disabled? | boolean | — | Disable the input. |
detailsText? | string | — | A text shown below the input to be provided more information about the CvcInput. |
detailsSubText? | string | — | A subtext shown below the input to be provided more information about the CvcInput. |
elementRef? | Ref<HTMLInputElement> | — | Get the DOM-reference from the TextInput-element |