Norsk Tipping Design System

CvcInput

Install

yarn add @ntds/text-input

Import

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

Props

PropTypeDefaultDescription
headingLevel?HeadingLevelThe heading level to use in-context. The level used will not change the appearance or style. 1 = <h1> 2 = <h2> ... and so on ..
id?stringThe id of the CvcInput
value?stringThe value of the CvcInput
setValue?(value: string) => voidPass 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?booleanOverride aria live for error message
accessibleToggleButtonLabel?stringOverwrite aria-label for visibilityToggle
hideLabels?booleanWhether or not the labels and description-buttons should be included.
disabled?booleanDisable the input.
detailsText?stringA text shown below the input to be provided more information about the CvcInput.
detailsSubText?stringA 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