Field

import {Field} from "@qui/react-vscode"

Examples

Showcase

Theme:

Dark Modern

import {ReactNode} from "react"

import {Field, Input} from "@qui/react-vscode"

export default function FieldShowcase(): ReactNode {
  return (
    <Field className="w-48">
      <Input />
    </Field>
  )
}

API

FieldProps

Name & Description	Option(s)	Default
children ^* React children prop.	ReactNode
as The component used for the root node. It can be a React component or element.	\| ElementType \| ComponentType	'div'
disabled Indicates whether the field is disabled.	boolean
id id attribute. If omitted, a unique identifier will be automatically generated for accessibility.	string
invalid Indicates whether the field is invalid.	boolean
readOnly Indicates whether the field is read-only.	boolean
ref Optional ref to the root element.	Ref<HTMLElement> & ComponentPropsWithRef['ref']
required Indicates whether the field is required.	boolean

children

Type

ReactNode

Description

React children prop.

Type

| ElementType
| ComponentType

Default

'div'

Description

The component used for the root node. It can be a React component or element.

disabled

Type

boolean

Description

Indicates whether the field is disabled.

Type

string

Description

id attribute. If omitted, a unique identifier will be automatically generated for accessibility.

invalid

Type

boolean

Description

Indicates whether the field is invalid.

readOnly

Type

boolean

Description

Indicates whether the field is read-only.

ref

Type

Ref<HTMLElement> &
ComponentPropsWithRef['ref']

Description

Optional ref to the root element.

required

Type

boolean

Description

Indicates whether the field is required.

Dropdown

Icon