CodeInput

The CodeInput component allows users to input strings.

Basic usage

Set the language using the language prop.
The following languages are supported:
  • sql
  • mysql
  • pgsql
  • json
  • javascript
  • jsx
  • typescript
  • tsx
  • yaml

Customization

You can configure the theme, whether to show line numbers, and whether to show a fold gutter.

Component state

You can use the defaultValue prop to set the initial value. You can also access the code input contents using the value field on the component state.

Component API

NameDescriptionDefault
id
string
The ID referenced by the global component state
defaultValue
string
The input value on initial render
defaultDisabled
boolean
The input's disabled state on initial render
validate
((value: string) => string | undefined) | Array<(value: string) => string | undefined>
A single function or an array of functions that validate the input value.
required
boolean
Adds red asterisk on the right side of label and sets required on input element
false
placeholder
string
Hint text displayed when the input is empty.
label
Component
Label displayed above the input.
description
Component
Description displayed below the input.
error
Component
Error text displayed below the input.
disabled
boolean
Disables the input. Prefer to use defaultDisabled and component state.
false
value
string
The value of the input when using as a controlled component. Prefer using defaultValue and the global component state.
language
"javascript" | "jsx" | "json" | "sql" | "tsx" | "typescript" | "yaml" | "mysql" | "pgsql"
The language that the code input should be configured with.
lineNumbers
boolean
Whether to show line numbers.
false
foldGutter
boolean
Whether to enable code folding.
false
theme
"light" | "dark"
Theme of the code input.
light
style
CSSProperties
CSS style overrides.
onChange
(value: string) => void
Callback when input changes when using as a controlled component. Prefer using the global component state.

State API

NameDescription
value
string
The string currently in the code input
setValue
(value: string) => void
Sets the value of the code input
disabled
boolean
Whether the code input is disabled
setDisabled
(disabled?: boolean) => void
Sets the disabled value of the code input. If the `disabled` value is not provided, the code input will be disabled