Overview
This code input component is designed for seamless multi-line code entry. It provides up to 3 support action controls.
Overview
You can set maximum 3 actions as support functionalities eg. wrap code, fullscreen, upload code etc.
Accessibility note cannot be disabled, should be visible at all times.
You can apply vertical scrolling to the code snippet if there are more than nine lines of code.
Terminal commands are often longer strings. Apply horizontal scrolling to maintain the set width of the box for these longer strings.
Anatomy
Label: Identifies the purpose of the field
Actions: Can hold up to 3 action items
Accessibility Label: Non-editable note, should be visible at all times
Input area: Main area where user can enter code strings
Helper text (Optional): Provides additional context about the expected input
Error message (Optional): Display validation errors and warnings
Variant & Props
Action items: Optional action items like copy code etc.
Default value: Initial value when the input is rendered
Read-Only state: Non-interactive state
Disabled state: Non-interactive state
Error and Warning state: Indicates validation issues
Keyboard Interactions
Tab navigation between controls and to enter the input field
Press Ctrl + M (or Cmd + Shift + M on Mac) to shift between accessibility mode