Typable

Add data-dn-typable to a semantic text-entry control such as input or textarea to apply Density’s field background, foreground, focus, and disabled states. The element keeps its native editing and accessibility behavior.

Field states

Typable elements respond to keyboard focus and disabled state. Use native disabled on form controls, or data-disabled when building an accessible custom field.

import { useState } from "react";

import { View } from "density-base-ui";

export default function TypableExample() {
  const [value, setValue] = useState("");

  return (
    <View align="start" padding={false}>
      <label>
        Project name
        <input
          data-dn-typable
          value={value}
          onChange={(event) => setValue(event.target.value)}
          placeholder="Untitled project"
        />
      </label>
    </View>
  );
}

Use data-dn-emphasis to select the field’s visual priority. Typable styling owns field state, while the surrounding component owns its geometry and layout.