Log In Sign Up
Home›Docs›Form›Field Component

Field Component

Category: Form
A form field container is the basic unit that makes up a complete form. Within a form field container, child elements may include native elements like input, custom form field components, form validation modules, a left-side label header, right-side help elements, and alert elements below.

Basic Structure

The form container primarily consists of five parts: oc-field, _field-label, _field-cont, _field-input, and _field-help.

  • Output
  • HTML
  • Field name
    Other content
    Required 
  •

Complex Structure

We provide more available elements in three directions within _field-input:

  • Below: nodes like _valid, oc-callout, _field-note, etc.
  • Inside: nodes like _field-unit, _box-tools, etc.
  • Right side: nodes with rep=disk, rep=image, rep=cube, rep=text, oc-btn, etc.
  • Output
  • HTML
  • Field name
    Validating...
    KM
    India is a diverse and fast-growing country known for its culture, democracy, and emerging economy.
    Please note the text format...
    Field name
    Validating...
    Get phoneConfirm
    Field name
    Validating...
    This is wrap text 
  •

All Native Form Field Types

The oc-field form field container supports all native form fields.

Auxiliary layout tags include: _row (horizontal flex layout), _flex (flex child elements), oc-bc (vertical spacing), _grid (grid layout), oc-callout (alert), etc.

The form container does not handle the width of type=submit/type=reset/button elements. If full-width buttons are needed, you can add the _w-full style class.

  • Output
  • HTML
  • Name
    Note: Max 10 characters
    Required
    Unit Type
    BR
    LR
    BA
    Please select our latest AI-powered product
    Size
    M
    Phone
    Code error
    Request code
    Avatar
    Lee
    File
    Country
    Countries
    Select 2+
    Radio
    Checkbox
    Number
    South Korea is a global leader in innovation, with major companies like Samsung and Hyundai driving its economy. It's also a cultural powerhouse thanks to the global popularity of K-pop, Korean dramas, and fashion. With a strong education system and urban infrastructure, South Korea maintains rapid development while preserving Confucian values and rich historical sites.
    Datetime
    Search
    Color
    Range
    Textarea
    Progress
    Meter
    Button
     
  •

All Custom Form Field Types

The oc-field form field container supports all custom form field types.

  • Output
  • HTML
  • Name
    Note: Max 10 characters
    Required
    Unit Type
    BR
    LR
    BA
    Please select our latest AI-powered product
    Size
    Phone
    Code error
    File
    Country
    Countries
    Select 2+
    Radio
    Checkbox
    Number
    South Korea is a global leader in innovation, with major companies like Samsung and Hyundai driving its economy. It's also a cultural powerhouse thanks to the global popularity of K-pop, Korean dramas, and fashion. With a strong education system and urban infrastructure, South Korea maintains rapid development while preserving Confucian values and rich historical sites.
    Datetime
    Search
    Color
    Range
    Textarea
    Upload
    Progress
    Meter
    Button
     
  •

Sizes

Both native form fields and custom form fields support three sizes:

  • size=sm: Height 32px (3.2rem)
  • size=md: Height 40px (4.8rem)
  • size=lg: Height 56px (5.6rem)

Naturally, the oc-field component also supports these three sizes.

  • Output
  • HTML
  • size=sm
    size=md(default)
    size=lg
    size=sm
    size=md(default)
    size=lg
     
  •

Types

The container type of form fields can be set via the type attribute. The default type has the following characteristics:

  1. Uses grid layout for the overall structure
  2. The label area can span the entire row and supports two-line display, making it friendly and secure for longer field names
  3. The content area has a fixed width of approximately 400px (40rem)
  4. The help area is horizontally aligned with the form field, with a flexible width
  5. Text is left-aligned by default

Available types include:

  • type=apart: Based on the default type, the entire content area occupies all available space, with both content and help areas using flex layout
  • type=fixed: The label area has a fixed width, content area has a fixed width, and help area has a flexible width - all three are horizontally aligned
  • type=full: Extends the fixed type to fill the entire row, with all three areas using flex layout. Label and help widths are flexible while the content area occupies remaining space
  • type=compact: Removes borders from form fields while maintaining the full type layout
  • type=embed: Uses flex layout overall, with the label absolutely positioned out of document flow so it visually overlaps/embeds into the form field
  • Output
  • HTML
  • Default
    type=apart
    type=fixed
    type=full
    type=compact
    type=embed
     
  •

flexible Attribute

For the default type and form field containers of type=fixed/embed, you can add the flexible attribute to make the form field occupy all available space.

  • Output
  • HTML
  • default
    type=fixed
    type=embed
     
  •

Attributes

Attribute Type Options Default Description
type string 'apart'/'fixed'/'full'/'embed'/'compact' - Display style type
size string 'sm'/'md'/'lg' 'md' Container and form field size
flexible boolean ''/- - Whether to make form field occupy full width

Common Methods

Common component methods:

  • set: Set properties (takes key-value pairs or array)
  • reset: Reset properties (no params)
  • clear: Clear properties and values (no params)

Basic usage: CompElem.reset()

Common Events

Common component events:

  • connected: Component connected (no params)
  • disconnected: Component disconnected (no params)
  • adopted: Component moved (no params)
  • set: Property set (receives value)
  • cleared: Property cleared (no params)
  • reset: Property reset (no params)

Basic usage: CompElem.on('connected',()=>{console.log('connected')})

Tags: , ,
Prev
Fields Component
4 months ago

New Launch: 20% Off All Products

Unlock all examples and development resources