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
Name | Description | Default |
---|---|---|
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
Name | Description |
---|---|
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 |