CodeInput

The CodeInput component allows users to input strings.

Basic usage
Set the language using the language prop.
tsx
Copied
1
<CodeInput
2
  label="Write some code"
3
  language="javascript"
4
  defaultValue='console.log("Hello world!");'
5
/>
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.
tsx
Copied
1
<CodeInput
2
  label="Write some code"
3
  language="javascript"
4
  theme="dark"
5
  lineNumbers
6
  foldGutter
7
  defaultValue={DEFAULT_CODE}
8
/>

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.
tsx
Copied
1
<CodeInput
2
  id={componentState.id}
3
  label="Write some code"
4
  language="javascript"
5
  defaultValue='console.log("Hello world!");'
6
/>
7
<Code language="javascript">{componentState.value || ""}</Code>

Component API
defaultDisabled
optional
boolean

The input's disabled state on initial render

defaultValue
optional
string

The input value on initial render

description
optional
React.ReactNode

Description displayed below the input.

disabled
optional
default: false
boolean

Disables the input. Prefer to use defaultDisabled and component state.

error
optional
React.ReactNode

Error text displayed below the input.

foldGutter
optional
default: false
boolean

Whether to enable code folding.

id
optional
string

The ID referenced by the global component state

label
optional
React.ReactNode

Label displayed above the input.

language
optional
"javascript" | "jsx" | "json" | "sql" | "tsx" | "typescript" | "yaml" | "mysql" | "pgsql"

The language that the code input should be configured with.

lineNumbers
optional
default: false
boolean

Whether to show line numbers.

onChange
(value: string) => void

Callback when input changes when using as a controlled component. Prefer using the global component state.

placeholder
optional
string

Hint text displayed when the input is empty.

required
optional
default: false
boolean

Adds red asterisk on the right side of label and sets required on input element

theme
optional
default: light
"light" | "dark"

Theme of the code input.

validate
optional
((value: string) => string | undefined) | Array<(value: string) => string | undefined>

A single function or an array of functions that validate the input value.

value
optional
string

The value of the input when using as a controlled component. Prefer using defaultValue and the global component state.

State API
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

setValue
(value: string) => void

Sets the value of the code input

value
string

The string currently in the code input

PrivacyTermsSupport