Norsk Tipping Design System

CvcInput

Install

yarn add @ntds/text-input

Import

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

Props

PropTypeDefaultDescription
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

On this page