Natively Pluggable Module

    TypeScript icon, indicating that this package has built-in type declarations

    0.10.5 • Public • Published



      import GridCol from '@govuk-react/grid-col';

    Grid Column.

    Should always be wrapped by GridRow. Will always render a column at full width if the browser width is below the TABLET breakpoint.

    NB our grid is based on flex-box, which differs from govuk-frontend, which instead uses floats, however it is otherwise similar to use.


    Prop Required Default Type Description
    about string
    accessKey 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" | "false" Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
    aria-autocomplete "list" | "none" | "both" | "inline" Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be
    presented if they are made.
    aria-busy boolean | "true" | "false" Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.
    aria-checked boolean | "true" | "false" | "mixed" Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
    @see aria-pressed
    @see aria-selected.
    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" | "true" | "false" | "page" | "step" | "location" | "date" Indicates the element that represents the current item within a container or set of related elements.
    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" | "false" Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
    @see aria-hidden
    @see aria-readonly.
    aria-dropeffect "link" | "none" | "copy" | "move" | "execute" | "popup" Indicates what functions can be performed when a dragged object is released on the drop target.
    @deprecated in ARIA 1.1
    aria-errormessage string Identifies the element that provides an error message for the object.
    @see aria-invalid
    @see aria-describedby.
    aria-expanded boolean | "true" | "false" Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
    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" | "false" Indicates an element's "grabbed" state in a drag-and-drop operation.
    @deprecated in ARIA 1.1
    aria-haspopup boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
    aria-hidden boolean | "true" | "false" Indicates whether the element is exposed to an accessibility API.
    @see aria-disabled.
    aria-invalid boolean | "true" | "false" | "grammar" | "spelling" Indicates the entered value does not conform to the format expected by the application.
    @see aria-errormessage.
    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" | "polite" Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
    aria-modal boolean | "true" | "false" Indicates whether an element is modal when displayed.
    aria-multiline boolean | "true" | "false" Indicates whether a text box accepts multiple lines of input or only a single line.
    aria-multiselectable boolean | "true" | "false" Indicates that the user may select more than one item from the current selectable descendants.
    aria-orientation "horizontal" | "vertical" Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
    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" | "false" | "mixed" Indicates the current "pressed" state of toggle buttons.
    @see aria-checked
    @see aria-selected.
    aria-readonly boolean | "true" | "false" Indicates that the element is not editable, but is otherwise operable.
    @see aria-disabled.
    aria-relevant "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
    @see aria-atomic.
    aria-required boolean | "true" | "false" Indicates that user input is required on the element before a form may be submitted.
    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" | "false" Indicates the current "selected" state of various widgets.
    @see aria-checked
    @see aria-pressed.
    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" | "descending" | "other" Indicates if items in a table or grid are sorted in ascending or descending order.
    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
    autoCorrect string
    autoSave string
    children undefined ReactNode GridCol content
    className string
    color string
    columnFull undefined boolean Dimension setting for the column (deprecated)
    columnOneHalf undefined boolean Dimension setting for the column (deprecated)
    columnOneQuarter undefined boolean Dimension setting for the column (deprecated)
    columnOneThird undefined boolean Dimension setting for the column (deprecated)
    columnThreeQuarters undefined boolean Dimension setting for the column (deprecated)
    columnTwoThirds undefined boolean Dimension setting for the column (deprecated)
    contentEditable Booleanish | "inherit"
    contextMenu string
    dangerouslySetInnerHTML { __html: string; }
    datatype string
    defaultChecked boolean
    defaultValue string | number | readonly string[]
    dir string
    draggable Booleanish
    forwardedAs undefined
    hidden boolean
    id string
    inlist any
    inputMode "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" Hints at the type of data that might be entered by the user while editing the element or its contents
    is string Specify that a standard HTML element should behave like a defined custom built-in element
    itemID string
    itemProp string
    itemRef string
    itemScope boolean
    itemType string
    key Key
    lang 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 FormEventHandler
    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
    placeholder string
    prefix string
    property string
    radioGroup string
    ref Ref
    resource string
    results number
    role AriaRole
    security string
    setDesktopWidth undefined string | number Explicitly set desktop column to width using value or descriptive string
    (one-quarter, one-third, one-half, two-thirds, three-quarters, full)
    setWidth undefined string | number Explicitly set column to width using value or descriptive string
    (one-quarter, one-third, one-half, two-thirds, three-quarters, full)
    slot string
    spellCheck Booleanish
    style CSSProperties
    suppressContentEditableWarning boolean
    suppressHydrationWarning boolean
    tabIndex number
    theme any
    title string
    translate "yes" | "no"
    typeof string
    unselectable "on" | "off"
    vocab string




    npm i @govuk-react/grid-col

    DownloadsWeekly Downloads






    Unpacked Size

    53.2 kB

    Total Files


    Last publish


    • loque-
    • steve_sims
    • petelockey
    • penx
    • marksy