@govuk-react/input
    TypeScript icon, indicating that this package has built-in type declarations

    0.10.0 • Public • Published

    Input

    Import

      import Input from '@govuk-react/input';

    Use the text input component when you need to let users enter text that’s no longer than a single line, such as their name or phone number.

    Properties

    Prop Required Default Type Description
    about `````` string
    accept `````` string
    accessKey `````` string
    alt `````` string
    aria-activedescendant `````` string Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
    aria-atomic `````` boolean "true"
    aria-autocomplete `````` "list" "none"
    aria-busy `````` boolean "true"
    aria-checked `````` boolean "true"
    aria-colcount `````` number Defines the total number of columns in a table, grid, or treegrid.
    @see aria-colindex.
    aria-colindex `````` number Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
    @see aria-colcount
    @see aria-colspan.
    aria-colspan `````` number Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
    @see aria-colindex
    @see aria-rowspan.
    aria-controls `````` string Identifies the element (or elements) whose contents or presence are controlled by the current element.
    @see aria-owns.
    aria-current `````` boolean "time"
    aria-describedby `````` string Identifies the element (or elements) that describes the object.
    @see aria-labelledby
    aria-details `````` string Identifies the element that provides a detailed, extended description for the object.
    @see aria-describedby.
    aria-disabled `````` boolean "true"
    aria-dropeffect `````` "link" "none"
    aria-errormessage `````` string Identifies the element that provides an error message for the object.
    @see aria-invalid
    @see aria-describedby.
    aria-expanded `````` boolean "true"
    aria-flowto `````` string Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
    allows assistive technology to override the general default of reading in document source order.
    aria-grabbed `````` boolean "true"
    aria-haspopup `````` boolean "dialog"
    aria-hidden `````` boolean "true"
    aria-invalid `````` boolean "true"
    aria-keyshortcuts `````` string Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
    aria-label `````` string Defines a string value that labels the current element.
    @see aria-labelledby.
    aria-labelledby `````` string Identifies the element (or elements) that labels the current element.
    @see aria-describedby.
    aria-level `````` number Defines the hierarchical level of an element within a structure.
    aria-live `````` "off" "assertive"
    aria-modal `````` boolean "true"
    aria-multiline `````` boolean "true"
    aria-multiselectable `````` boolean "true"
    aria-orientation `````` "horizontal" "vertical"
    aria-owns `````` string Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship
    between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
    @see aria-controls.
    aria-placeholder `````` string Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.
    A hint could be a sample value or a brief description of the expected format.
    aria-posinset `````` number Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
    @see aria-setsize.
    aria-pressed `````` boolean "true"
    aria-readonly `````` boolean "true"
    aria-relevant `````` "text" "additions"
    aria-required `````` boolean "true"
    aria-roledescription `````` string Defines a human-readable, author-localized description for the role of an element.
    aria-rowcount `````` number Defines the total number of rows in a table, grid, or treegrid.
    @see aria-rowindex.
    aria-rowindex `````` number Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
    @see aria-rowcount
    @see aria-rowspan.
    aria-rowspan `````` number Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
    @see aria-rowindex
    @see aria-colspan.
    aria-selected `````` boolean "true"
    aria-setsize `````` number Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
    @see aria-posinset.
    aria-sort `````` "none" "ascending"
    aria-valuemax `````` number Defines the maximum allowed value for a range widget.
    aria-valuemin `````` number Defines the minimum allowed value for a range widget.
    aria-valuenow `````` number Defines the current value for a range widget.
    @see aria-valuetext.
    aria-valuetext `````` string Defines the human readable text alternative of aria-valuenow for a range widget.
    as `````` undefined
    autoCapitalize `````` string
    autoComplete `````` string
    autoCorrect `````` string
    autoFocus `````` boolean
    autoSave `````` string
    capture `````` string boolean
    checked `````` boolean
    className `````` string
    color `````` string
    contentEditable `````` Booleanish "inherit"
    contextMenu `````` string
    crossOrigin `````` string
    dangerouslySetInnerHTML `````` { __html: string; }
    datatype `````` string
    defaultChecked `````` boolean
    defaultValue `````` string number
    dir `````` string
    disabled `````` boolean
    draggable `````` Booleanish
    error undefined boolean
    errorColor undefined string
    form `````` string
    formAction `````` string
    formEncType `````` string
    formMethod `````` string
    formNoValidate `````` boolean
    formTarget `````` string
    forwardedAs `````` undefined
    height `````` string number
    hidden `````` boolean
    id `````` string
    inlist `````` any
    inputMode `````` "text" "search"
    is `````` string Specify that a standard HTML element should behave like a defined custom built-in element
    @see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is
    itemID `````` string
    itemProp `````` string
    itemRef `````` string
    itemScope `````` boolean
    itemType `````` string
    key `````` Key
    lang `````` string
    list `````` string
    margin `````` Margin Margin[]
    max `````` string number
    maxLength `````` number
    mb `````` string number
    min `````` string number
    minLength `````` number
    multiple `````` boolean
    name `````` string
    onAbort `````` ReactEventHandler
    onAbortCapture `````` ReactEventHandler
    onAnimationEnd `````` AnimationEventHandler
    onAnimationEndCapture `````` AnimationEventHandler
    onAnimationIteration `````` AnimationEventHandler
    onAnimationIterationCapture `````` AnimationEventHandler
    onAnimationStart `````` AnimationEventHandler
    onAnimationStartCapture `````` AnimationEventHandler
    onAuxClick `````` MouseEventHandler
    onAuxClickCapture `````` MouseEventHandler
    onBeforeInput `````` FormEventHandler
    onBeforeInputCapture `````` FormEventHandler
    onBlur `````` FocusEventHandler
    onBlurCapture `````` FocusEventHandler
    onCanPlay `````` ReactEventHandler
    onCanPlayCapture `````` ReactEventHandler
    onCanPlayThrough `````` ReactEventHandler
    onCanPlayThroughCapture `````` ReactEventHandler
    onChange `````` ChangeEventHandler
    onChangeCapture `````` FormEventHandler
    onClick `````` MouseEventHandler
    onClickCapture `````` MouseEventHandler
    onCompositionEnd `````` CompositionEventHandler
    onCompositionEndCapture `````` CompositionEventHandler
    onCompositionStart `````` CompositionEventHandler
    onCompositionStartCapture `````` CompositionEventHandler
    onCompositionUpdate `````` CompositionEventHandler
    onCompositionUpdateCapture `````` CompositionEventHandler
    onContextMenu `````` MouseEventHandler
    onContextMenuCapture `````` MouseEventHandler
    onCopy `````` ClipboardEventHandler
    onCopyCapture `````` ClipboardEventHandler
    onCut `````` ClipboardEventHandler
    onCutCapture `````` ClipboardEventHandler
    onDoubleClick `````` MouseEventHandler
    onDoubleClickCapture `````` MouseEventHandler
    onDrag `````` DragEventHandler
    onDragCapture `````` DragEventHandler
    onDragEnd `````` DragEventHandler
    onDragEndCapture `````` DragEventHandler
    onDragEnter `````` DragEventHandler
    onDragEnterCapture `````` DragEventHandler
    onDragExit `````` DragEventHandler
    onDragExitCapture `````` DragEventHandler
    onDragLeave `````` DragEventHandler
    onDragLeaveCapture `````` DragEventHandler
    onDragOver `````` DragEventHandler
    onDragOverCapture `````` DragEventHandler
    onDragStart `````` DragEventHandler
    onDragStartCapture `````` DragEventHandler
    onDrop `````` DragEventHandler
    onDropCapture `````` DragEventHandler
    onDurationChange `````` ReactEventHandler
    onDurationChangeCapture `````` ReactEventHandler
    onEmptied `````` ReactEventHandler
    onEmptiedCapture `````` ReactEventHandler
    onEncrypted `````` ReactEventHandler
    onEncryptedCapture `````` ReactEventHandler
    onEnded `````` ReactEventHandler
    onEndedCapture `````` ReactEventHandler
    onError `````` ReactEventHandler
    onErrorCapture `````` ReactEventHandler
    onFocus `````` FocusEventHandler
    onFocusCapture `````` FocusEventHandler
    onGotPointerCapture `````` PointerEventHandler
    onGotPointerCaptureCapture `````` PointerEventHandler
    onInput `````` FormEventHandler
    onInputCapture `````` FormEventHandler
    onInvalid `````` FormEventHandler
    onInvalidCapture `````` FormEventHandler
    onKeyDown `````` KeyboardEventHandler
    onKeyDownCapture `````` KeyboardEventHandler
    onKeyPress `````` KeyboardEventHandler
    onKeyPressCapture `````` KeyboardEventHandler
    onKeyUp `````` KeyboardEventHandler
    onKeyUpCapture `````` KeyboardEventHandler
    onLoad `````` ReactEventHandler
    onLoadCapture `````` ReactEventHandler
    onLoadStart `````` ReactEventHandler
    onLoadStartCapture `````` ReactEventHandler
    onLoadedData `````` ReactEventHandler
    onLoadedDataCapture `````` ReactEventHandler
    onLoadedMetadata `````` ReactEventHandler
    onLoadedMetadataCapture `````` ReactEventHandler
    onLostPointerCapture `````` PointerEventHandler
    onLostPointerCaptureCapture `````` PointerEventHandler
    onMouseDown `````` MouseEventHandler
    onMouseDownCapture `````` MouseEventHandler
    onMouseEnter `````` MouseEventHandler
    onMouseLeave `````` MouseEventHandler
    onMouseMove `````` MouseEventHandler
    onMouseMoveCapture `````` MouseEventHandler
    onMouseOut `````` MouseEventHandler
    onMouseOutCapture `````` MouseEventHandler
    onMouseOver `````` MouseEventHandler
    onMouseOverCapture `````` MouseEventHandler
    onMouseUp `````` MouseEventHandler
    onMouseUpCapture `````` MouseEventHandler
    onPaste `````` ClipboardEventHandler
    onPasteCapture `````` ClipboardEventHandler
    onPause `````` ReactEventHandler
    onPauseCapture `````` ReactEventHandler
    onPlay `````` ReactEventHandler
    onPlayCapture `````` ReactEventHandler
    onPlaying `````` ReactEventHandler
    onPlayingCapture `````` ReactEventHandler
    onPointerCancel `````` PointerEventHandler
    onPointerCancelCapture `````` PointerEventHandler
    onPointerDown `````` PointerEventHandler
    onPointerDownCapture `````` PointerEventHandler
    onPointerEnter `````` PointerEventHandler
    onPointerEnterCapture `````` PointerEventHandler
    onPointerLeave `````` PointerEventHandler
    onPointerLeaveCapture `````` PointerEventHandler
    onPointerMove `````` PointerEventHandler
    onPointerMoveCapture `````` PointerEventHandler
    onPointerOut `````` PointerEventHandler
    onPointerOutCapture `````` PointerEventHandler
    onPointerOver `````` PointerEventHandler
    onPointerOverCapture `````` PointerEventHandler
    onPointerUp `````` PointerEventHandler
    onPointerUpCapture `````` PointerEventHandler
    onProgress `````` ReactEventHandler
    onProgressCapture `````` ReactEventHandler
    onRateChange `````` ReactEventHandler
    onRateChangeCapture `````` ReactEventHandler
    onReset `````` FormEventHandler
    onResetCapture `````` FormEventHandler
    onScroll `````` UIEventHandler
    onScrollCapture `````` UIEventHandler
    onSeeked `````` ReactEventHandler
    onSeekedCapture `````` ReactEventHandler
    onSeeking `````` ReactEventHandler
    onSeekingCapture `````` ReactEventHandler
    onSelect `````` ReactEventHandler
    onSelectCapture `````` ReactEventHandler
    onStalled `````` ReactEventHandler
    onStalledCapture `````` ReactEventHandler
    onSubmit `````` FormEventHandler
    onSubmitCapture `````` FormEventHandler
    onSuspend `````` ReactEventHandler
    onSuspendCapture `````` ReactEventHandler
    onTimeUpdate `````` ReactEventHandler
    onTimeUpdateCapture `````` ReactEventHandler
    onTouchCancel `````` TouchEventHandler
    onTouchCancelCapture `````` TouchEventHandler
    onTouchEnd `````` TouchEventHandler
    onTouchEndCapture `````` TouchEventHandler
    onTouchMove `````` TouchEventHandler
    onTouchMoveCapture `````` TouchEventHandler
    onTouchStart `````` TouchEventHandler
    onTouchStartCapture `````` TouchEventHandler
    onTransitionEnd `````` TransitionEventHandler
    onTransitionEndCapture `````` TransitionEventHandler
    onVolumeChange `````` ReactEventHandler
    onVolumeChangeCapture `````` ReactEventHandler
    onWaiting `````` ReactEventHandler
    onWaitingCapture `````` ReactEventHandler
    onWheel `````` WheelEventHandler
    onWheelCapture `````` WheelEventHandler
    padding `````` Padding Padding[]
    pattern `````` string
    placeholder `````` string
    prefix `````` string
    property `````` string
    radioGroup `````` string
    readOnly `````` boolean
    ref `````` Ref
    required `````` boolean
    resource `````` string
    results `````` number
    role `````` AriaRole
    security `````` string
    size `````` number
    slot `````` string
    spellCheck `````` Booleanish
    src `````` string
    step `````` string number
    style `````` CSSProperties
    suppressContentEditableWarning `````` boolean
    suppressHydrationWarning `````` boolean
    tabIndex `````` number
    theme `````` any
    title `````` string
    translate `````` "yes" "no"
    type text HTMLInputTypeAttribute
    typeof `````` string
    unselectable `````` "on" "off"
    value `````` string number
    vocab `````` string
    width `````` string number

    Keywords

    none

    Install

    npm i @govuk-react/input

    DownloadsWeekly Downloads

    3,141

    Version

    0.10.0

    License

    MIT

    Unpacked Size

    37.9 kB

    Total Files

    12

    Last publish

    Collaborators

    • loque-
    • steve_sims
    • petelockey
    • penx
    • marksy