Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • How to Read This Documentation
    • Composition Philosophy
    • 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
    • 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
    • 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
K
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Input

yarn add @clayui/form

This section demonstrates the different text input types.

  • Examples
  • Markup
  • API

Stable3.89.0View in LexiconCHANGELOGstorybook demos

  • Basic Usage
  • Using another elements as an input
  • Groups
    • Separated
    • Connected
    • Mixed
    • Stacked

ClayInput is exported from the @clayui/form package, consisting of some low-level utilities that provides the ability to create Inputs and Input Groups.

Basic Usage

Copied!
Code Sample (expand to see it)

Using another elements as an input

If you want to use another component instead of input for enter text typed things, you can just pass this tag to component property, like the example below:

Copied!
Code Sample (expand to see it)

Groups

If you want to create groups of inputs, use <ClayInput.Group>, <ClayInput.GroupInsetItem>, <ClayInput.GroupItem> and <ClayInput.GroupText>.

Separated

Wrap each item in a <ClayInput.Group> with <ClayInput.GroupItem>. If you want to make an item shrink to fit, use shrink property.

Copied!
Code Sample (expand to see it)

Connected

For creating a connected input group, use prepend property for each <ClayInput.GroupItem> and for the last <ClayInput.GroupItem> use the property append.

Copied!
Code Sample (expand to see it)

Mixed

Copied!
Code Sample (expand to see it)

Stacked

For creating a stack of the items inside a item group, use stacked property in the <ClayInput.Group> and use shrink property for using in screens sizes less than 576px.

How can this be improved? Create an issue!