CvcInput

Install

yarn add @ntds/text-input

import { CvcInput } from '@ntds/text-input';

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
`label?`	`string`	—	A visible label that names the input. Without it no label renders, and the input must be named another way, such as with `aria-label`.
`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
`hideDetails?`	`boolean`	—	Removes the details below the input ("Hva er CVC-kode?") and nothing else.
`disabled?`	`boolean`	—	Disable the input.
`detailsText?`	`string`	—	A text shown below the input to be provided more information about the CvcInput.
`elementRef?`	`Ref<HTMLInputElement>`	—	Get the DOM-reference from the TextInput-element