Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Focus Trap
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Reduced Motion
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Input

This section demonstrates the different text input types.

installyarn add @clayui/form
version3.104.0
  • Examples
  • Markup
  • API

Stable3.104.0View in LexiconCHANGELOGstorybook demos

  • Input
  • Input.Group
  • Input.GroupItem
  • Input.GroupInsetItem
  • Input.GroupText

Input

PropertyDescription
component
'input' | 'textarea' | React.ForwardRefExoticComponent<any>
Input component to render. Can either be a string like 'input' or 'textarea' or a component.

The default value is 'input'
insetAfter
boolean
Flag to indicate if input-group-inset-after class should be applied
insetBefore
boolean
Flag to indicate if input-group-inset-before class should be applied
sizing
'lg' | 'sm'
Selects the height of the input.
type


The default value is 'text'

Input.Group

PropertyDescription
small
boolean
Flag to indicate if input-group-sm class should be applied
stacked
boolean
Flag to indicate if input-group-stacked-sm-down class should be applied.

Input.GroupItem

PropertyDescription
append
boolean
Flag to indicate if input-group-append class should be applied
prepend
boolean
Flag to indicate if input-group-prepend class should be applied
shrink
boolean
Flag to indicate if input-group-item-shrink class should be applied

Input.GroupInsetItem

PropertyDescription
after
boolean
Flag to indicate if input-group-inset-item-after class should be applied.
before
boolean
Flag to indicate if input-group-inset-item-before class should be applied.
tag
'div' | 'span' | 'label'
Name of container element

The default value is 'div'

Input.GroupText

Extends from React.HTMLAttributes<HTMLDivElement>

How can this be improved? Create an issue!