Environment Variables Editor

ProNew

Key and value rows for configuration: keys are upper-cased and checked for format and duplicates, values can be hidden, and pasting a .env block fills the rows. Use this when people manage settings as name-value pairs.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Developers or admins edit key-value configuration (environment variables, headers, labels, custom fields).

Do not use it when: Do not use it for structured settings with different types per field; use a form with a field for each.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`initial`	`{ key, value }[]`	Starting rows.
`onChange`	`(vars) => void`	After every edit.

parseEnv(text) is exported.

Accessibility

Names and values have visible labels. A format or duplicate error is a linked alert and sets aria-invalid.
Values are type="password" by default; the eye button is a toggle with aria-pressed and a name that includes the variable ("Show value of API_KEY"). Autocomplete is off so browsers do not offer to save secrets.
Pasting is an accelerator only: Add variable and Remove are buttons. The empty message tells people about paste.

Testing

The pattern ships with a Testing Library test (env-vars-editor.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

Developers or admins edit key-value configuration (environment variables, headers, labels, custom fields).

Do not use it when: Do not use it for structured settings with different types per field; use a form with a field for each.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`initial`	`{ key, value }[]`	Starting rows.
`onChange`	`(vars) => void`	After every edit.

parseEnv(text) is exported.

Accessibility

Names and values have visible labels. A format or duplicate error is a linked alert and sets aria-invalid.
Values are type="password" by default; the eye button is a toggle with aria-pressed and a name that includes the variable ("Show value of API_KEY"). Autocomplete is off so browsers do not offer to save secrets.
Pasting is an accelerator only: Add variable and Remove are buttons. The empty message tells people about paste.

Testing

The pattern ships with a Testing Library test (env-vars-editor.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.