---
title: "Permission Row"
description: "A settings row with a deny / inherit / allow tri-state toggle."
---

A settings row with a deny / inherit / allow tri-state toggle. Compose it from the exported registry parts so local content and behaviour stay in the application while the visual contract stays token-driven.

_Live example of Permission Row — see the page for the rendered demo._

## Installation

```bash
npx newtui@latest add permission
```

Files written — React: components/ui/permission.tsx. Vue: components/ui/permission/Permission.vue, components/ui/permission/PermissionInfo.vue, components/ui/permission/PermissionName.vue, components/ui/permission/PermissionDescription.vue, components/ui/permission/PermissionStates.vue, components/ui/permission/index.ts.

## Usage

React:

```tsx
import { Permission } from "@/components/ui/permission"
```

Vue:

```ts
import { Permission, PermissionInfo, PermissionName, PermissionDescription, PermissionStates } from "@/components/ui/permission"
```

## API reference

**`PermissionStates`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `PermissionValue \| undefined` | — | Controlled value. |
| `defaultValue` | `PermissionValue \| undefined` | — | Initial value when uncontrolled. Defaults to `"inherit"`. |
| `onValueChange` | `(value: PermissionValue) => void \| undefined` | — | Optional onValueChange value. |
| `disabled` | `boolean \| undefined` | — | Optional disabled value. |

The registry exports `Permission`, `PermissionInfo`, `PermissionName`, `PermissionDescription`, `PermissionStates`, `PermissionValue`. Parts without a table accept the native attributes for the element they render; React uses `className`, while Vue uses `class` and fallthrough attributes.

## Accessibility

Expose deny, inherit and allow as one labelled choice group. The selected state must be announced programmatically and not communicated by colour alone.

## Tokens

Permission Row reads its colours, radii and motion from the `--newt-*` tokens. Override a token rather than editing the component.