diff --git a/src/stepper/index.ts b/src/stepper/index.ts
index 1a06a782..07119fb2 100644
--- a/src/stepper/index.ts
+++ b/src/stepper/index.ts
@@ -9,27 +9,27 @@ import styles from './stepper.style.js';
  * ```
  * @summary A form item that shows a value and can be increased or decreased by tw buttons
  *
- * @prop {string} [unit=''] - A single quantity of the value
- * @prop {boolean} disabled - If `true`, the component is disabled.
- * @prop {number} [step="1"] - The number to which the current value is increased or decreased.
+ * @prop {`string`} [`unit`=`''`] - A single quantity of the value
+ * @prop {`boolean`} [`disabled`=`false`] - If `true`, the component is disabled.
+ * @prop {`number`} [`step`=`1`] - The number to which the current value is increased or decreased.
  * It can be an integer or decimal
- * @prop {'small' | 'medium'} [size='medium'] - The size of icons and font.
- * @prop {number} min - The min value.
- * @prop {number} max - The max value.
- * @prop {number} fullWidth - If `true` the component will fill the parent.
- * @prop {number} [value="0"] - The current value.
+ * @prop {`'small'` \| `'medium'`} [`size`=`'medium'`] - The size of icons and font.
+ * @prop {`number`} [`min`=`-Infinity`] - The min value.
+ * @prop {`number`} [`max`=`Infinity`] - The max value.
+ * @prop {`number`} [`fullWidth`=`false`] - If `true` the component will fill the parent.
+ * @prop {`number`} [`value`=`0`] - The current value.
  *
- * @fires {CustomEvent} - Stepper change event
+ * @fires {`CustomEvent`} - Stepper change event
  *
- * @csspart stepper - The container that wraps the stepper component.
- * @csspart decrease-button - The button that contains minus icon and decrease the value.
- * @csspart increase-button - The button that contains plus icon and increases the value.
- * @csspart value - The `p` tag that shows the `value`.
- * @csspart unit - The `p` tag that shows the `unit` and will be hidden if `unit` not exists.
+ * @csspart `stepper` - The container that wraps the stepper component.
+ * @csspart `decrease-button` - The button that contains minus icon and decrease the value.
+ * @csspart `increase-button` - The button that contains plus icon and increases the value.
+ * @csspart `value` - The `p` tag that shows the `value`.
+ * @csspart `unit` - The `p` tag that shows the `unit` and will be hidden if `unit` not exists.
  *
- * @cssprop [--tap-font-family=--tap-sys-font-family]
- * @cssprop [--tap-stepper-typography-label-sm-size=--tap-sys-typography-label-md-size]
- * @cssprop [--tap-stepper-typography-label-md-size=--tap-sys-typography-label-lg-size]
+ * @cssprop [`--tap-font-family`=`--tap-sys-font-family`]
+ * @cssprop [`--tap-stepper-typography-label-sm-size`=`--tap-sys-typography-label-md-size`]
+ * @cssprop [`--tap-stepper-typography-label-md-size`=`--tap-sys-typography-label-lg-size`]
  */
 @customElement('tap-stepper')
 export class TapStepper extends Stepper {
diff --git a/src/text-field/index.ts b/src/text-field/index.ts
index 910de121..4b063500 100644
--- a/src/text-field/index.ts
+++ b/src/text-field/index.ts
@@ -1,14 +1,80 @@
-import { customElement } from "lit/decorators.js";
-import { TextField } from "./text-field";
-import styles from "./text-field.style";
+import { customElement } from 'lit/decorators.js';
+import { TextField } from './text-field';
+import styles from './text-field.style';
 
-@customElement("tap-text-field")
+/**
+ * ### Example
+ *
+ *
+ * ##### Simple
+ *
+ * ```html
+ * <tap-text-field></tap-text-field>
+ * ```
+ *
+ * ##### With Label and Placeholder
+ *
+ * ```html
+ * <tap-text-field label="Name" placeholder="Enter your name"></tap-text-field>
+ * ```
+ *
+ * @summary A text field component.
+ *
+ * @prop {`string`} [`value`=`''`] - The value of the text field.
+ * @prop {`boolean`} [`disabled`=`false`] - Indicates whether the text field is disabled.
+ * @prop {`boolean`} [`error`=`false`] - Indicates whether the text field has an error.
+ * @prop {`string`} [`caption`=`''`] - The caption text for the text field.
+ * @prop {`string`} [`label`=`''`] - The label for the text field.
+ * @prop {`string`} [`name`=`''`] - The name of the text field.
+ * @prop {`string`} [`placeholder`=`''`] - The placeholder text for the text field.
+ * @prop {`string`} [`inputmode`=`''`] - The input mode for the text field.
+ * @prop {`string`} [`type`=`''`] - The type of the text field.
+ * @prop {`string`} [`autocomplete`=`''`] - The autocomplete attribute for the text field.
+ *
+ * @csspart [`field`] - The main container for the text field.
+ * @csspart [`label`] - The label for the text field.
+ * @csspart [`container`] - The container for the input and any leading/trailing elements.
+ * @csspart [`input`] - The input element.
+ * @csspart [`caption`] - The caption for the text field.
+ *
+ * @cssprop [`--tap-font-family`=`--tap-sys-font-family`] - The font family used in the text field.
+ * @cssprop [`--tap-text-field-field-gap`=`--tap-sys-spacing-4`] - The gap between the elements in the text field.
+ * @cssprop [`--tap-text-field-label-color`=`--tap-sys-color-content-primary`] - The color of the label.
+ * @cssprop [`--tap-text-field-label-line-height`=`--tap-sys-typography-label-sm-height`] - The line height of the label.
+ * @cssprop [`--tap-text-field-label-font-size`=`--tap-sys-typography-label-sm-size`] - The font size of the label.
+ * @cssprop [`--tap-text-field-label-font-weight`=`--tap-sys-typography-label-sm-weight`] - The font weight of the label.
+ * @cssprop [`--tap-text-field-caption-color`=`--tap-sys-color-content-tertiary`] - The color of the caption.
+ * @cssprop [`--tap-text-field-caption-line-height`=`--tap-sys-typography-body-sm-height`] - The line height of the caption.
+ * @cssprop [`--tap-text-field-caption-font-size`=`--tap-sys-typography-body-sm-size`] - The font size of the caption.
+ * @cssprop [`--tap-text-field-caption-font-weight`=`--tap-sys-typography-body-sm-weight`] - The font weight of the caption.
+ * @cssprop [`--tap-text-field-container-height`=`--tap-sys-spacing-11`] - The height of the container.
+ * @cssprop [`--tap-text-field-container-padding`=`--tap-sys-spacing-6`] - The padding inside the container.
+ * @cssprop [`--tap-text-field-container-gap`=`--tap-sys-spacing-4`] - The gap between elements in the container.
+ * @cssprop [`--tap-text-field-container-background-color`=`--tap-sys-color-surface-tertiary`] - The background color of the container.
+ * @cssprop [`--tap-text-field-container-border-radius`=`--tap-sys-radius-3`] - The border radius of the container.
+ * @cssprop [`--tap-text-field-focus-background-color`=`--tap-sys-color-surface-secondary`] - The background color of the container when focused.
+ * @cssprop [`--tap-text-field-focus-border-width`=`--tap-sys-color-border-inverse-primary`] - The border width of the container when focused.
+ * @cssprop [`--tap-text-field-input-color`=`--tap-sys-color-content-primary`] - The color of the input text.
+ * @cssprop [`--tap-text-field-input-line-height`=`--tap-sys-typography-body-md-height`] - The line height of the input text.
+ * @cssprop [`--tap-text-field-input-font-size`=`--tap-sys-typography-body-md-size`] - The font size of the input text.
+ * @cssprop [`--tap-text-field-input-font-weight`=`--tap-sys-typography-body-md-weight`] - The font weight of the input text.
+ * @cssprop [`--tap-text-field-input-placeholder-color`=`--tap-sys-color-content-tertiary`] - The color of the placeholder text.
+ * @cssprop [`--tap-text-field-input-placeholder-line-height`=`--tap-sys-typography-body-md-height`] - The line height of the placeholder text.
+ * @cssprop [`--tap-text-field-input-placeholder-font-size`=`--tap-sys-typography-body-md-size`] - The font size of the placeholder text.
+ * @cssprop [`--tap-text-field-input-placeholder-font-weight`=`--tap-sys-typography-body-md-weight`] - The font weight of the placeholder text.
+ * @cssprop [`--tap-text-field-error-caption-color`=`--tap-sys-color-content-negative`] - The color of the caption when there is an error.
+ * @cssprop [`--tap-text-field-error-container-background-color`=`--tap-sys-color-surface-negative-light`] - The background color of the container when there is an error.
+ * @cssprop [`--tap-text-field-error-container-border-color`=`--tap-sys-color-border-negative`] - The border color of the container when there is an error.
+ * @cssprop [`--tap-text-field-disabled-container-background-color`=`--tap-sys-color-surface-disabled`] - The background color of the container when disabled.
+ * @cssprop [`--tap-text-field-disabled-container-color`=`--tap-sys-color-content-disabled`] - The color of the text and elements when disabled.
+ */
+@customElement('tap-text-field')
 export class TapTextField extends TextField {
   static readonly styles = [styles];
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    "tap-text-field": TapTextField;
+    'tap-text-field': TapTextField;
   }
 }
diff --git a/src/text-field/text-field.stories.ts b/src/text-field/text-field.stories.ts
index b0c784d6..ecd5d911 100644
--- a/src/text-field/text-field.stories.ts
+++ b/src/text-field/text-field.stories.ts
@@ -1,9 +1,9 @@
-import { html, TemplateResult } from "lit";
-import "./text-field.js";
+import { html, TemplateResult } from 'lit';
+import './text-field.js';
 
 export default {
-  title: "TextField",
-  component: "tap-text-field",
+  title: 'TextField',
+  component: 'tap-text-field',
   argTypes: {},
 };
 
diff --git a/src/text-field/text-field.style.ts b/src/text-field/text-field.style.ts
index d8ab5cf4..57ef166b 100644
--- a/src/text-field/text-field.style.ts
+++ b/src/text-field/text-field.style.ts
@@ -1,4 +1,4 @@
-import { css } from "lit";
+import { css } from 'lit';
 
 export default css`
   :host {
@@ -17,42 +17,79 @@ export default css`
 
   .field {
     direction: rtl;
-    font-family: var(--tap-sys-font-family);
+    font-family: var(--tap-font-family, var(--tap-sys-font-family));
     display: flex;
     flex-direction: column;
-    gap: var(--tap-sys-spacing-4);
+    gap: var(--tap-text-field-field-gap, var(--tap-sys-spacing-4));
   }
 
   .label {
-    color: var(--tap-sys-color-content-primary);
-    line-height: var(--tap-sys-typography-label-sm-height);
-    font-size: var(--tap-sys-typography-label-sm-size);
-    font-weight: var(--tap-sys-typography-label-sm-weight);
+    color: var(
+      --tap-text-field-label-color,
+      var(--tap-sys-color-content-primary)
+    );
+    line-height: var(
+      --tap-text-field-label-line-height,
+      var(--tap-sys-typography-label-sm-height)
+    );
+    font-size: var(
+      --tap-text-field-label-font-size,
+      var(--tap-sys-typography-label-sm-size)
+    );
+    font-weight: var(
+      --tap-text-field-label-font-weight,
+      var(--tap-sys-typography-label-sm-weight)
+    );
   }
 
   .caption {
-    color: var(--tap-sys-color-content-tertiary);
-    line-height: var(--tap-sys-typography-body-sm-height);
-    font-size: var(--tap-sys-typography-body-sm-size);
-    font-weight: var(--tap-sys-typography-body-sm-weight);
+    color: var(
+      --tap-text-field-caption-color,
+      var(--tap-sys-color-content-tertiary)
+    );
+    line-height: var(
+      --tap-text-field-caption-line-height,
+      var(--tap-sys-typography-body-sm-height)
+    );
+    font-size: var(
+      --tap-text-field-caption-font-size,
+      var(--tap-sys-typography-body-sm-size)
+    );
+    font-weight: var(
+      --tap-text-field-caption-font-weight,
+      var(--tap-sys-typography-body-sm-weight)
+    );
   }
 
   .container {
     /* FIXME: height of the input is 52px but we dont have 52px in our tokens */
-    height: var(--tap-sys-spacing-11);
-    padding: 0 var(--tap-sys-spacing-6);
+    height: var(--tap-text-field-container-height, var(--tap-sys-spacing-11));
+    padding: 0 var(--tap-text-field-container-padding, var(--tap-sys-spacing-6));
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: var(--tap-sys-spacing-4);
-    background-color: var(--tap-sys-color-surface-tertiary);
-    border-radius: var(--tap-sys-radius-3);
+    gap: var(--tap-text-field-container-gap, var(--tap-sys-spacing-4));
+    background-color: var(
+      --tap-text-field-container-background-color,
+      var(--tap-sys-color-surface-tertiary)
+    );
+    border-radius: var(
+      --tap-text-field-container-border-radius,
+      var(--tap-sys-radius-3)
+    );
     border: 2px solid transparent;
   }
 
   .container:focus-within {
-    background-color: var(--tap-sys-color-surface-secondary);
-    border: 2px solid var(--tap-sys-color-border-inverse-primary);
+    background-color: var(
+      --tap-text-field-focus-background-color,
+      var(--tap-sys-color-surface-secondary)
+    );
+    border: 2px solid
+      var(
+        --tap-text-field-focus-border-width,
+        var(--tap-sys-color-border-inverse-primary)
+      );
   }
 
   .input {
@@ -60,38 +97,77 @@ export default css`
     outline: none;
     flex: 1;
     background-color: transparent;
-    color: var(--tap-sys-color-content-primary);
-    line-height: var(--tap-sys-typography-body-md-height);
-    font-size: var(--tap-sys-typography-body-md-size);
-    font-weight: var(--tap-sys-typography-body-md-weight);
+    color: var(
+      --tap-text-field-input-color,
+      var(--tap-sys-color-content-primary)
+    );
+    line-height: var(
+      --tap-text-field-input-line-height,
+      var(--tap-sys-typography-body-md-height)
+    );
+    font-size: var(
+      --tap-text-field-input-font-size,
+      var(--tap-sys-typography-body-md-size)
+    );
+    font-weight: var(
+      --tap-text-field-input-font-weight,
+      var(--tap-sys-typography-body-md-weight)
+    );
     font-family: inherit;
   }
 
   .input::placeholder {
-    color: var(--tap-sys-color-content-tertiary);
-    line-height: var(--tap-sys-typography-body-md-height);
-    font-size: var(--tap-sys-typography-body-md-size);
-    font-weight: var(--tap-sys-typography-body-md-weight);
+    color: var(
+      --tap-text-field-input-placeholder-color,
+      var(--tap-sys-color-content-tertiary)
+    );
+    line-height: var(
+      --tap-text-field-input-placeholder-line-height,
+      var(--tap-sys-typography-body-md-height)
+    );
+    font-size: var(
+      --tap-text-field-input-placeholder-font-size,
+      var(--tap-sys-typography-body-md-size)
+    );
+    font-weight: var(
+      --tap-text-field-input-placeholder-font-weight,
+      var(--tap-sys-typography-body-md-weight)
+    );
     font-family: inherit;
   }
 
   :host([error]) .caption {
-    color: var(--tap-sys-color-content-negative);
+    color: var(
+      --tap-text-field-error-caption-color,
+      var(--tap-sys-color-content-negative)
+    );
   }
 
   :host([error]) .container {
-    background-color: var(--tap-sys-color-surface-negative-light);
-    border-color: var(--tap-sys-color-border-negative);
+    background-color: var(
+      --tap-text-field-error-container-background-color,
+      var(--tap-sys-color-surface-negative-light)
+    );
+    border-color: var(
+      --tap-text-field-error-container-border-color,
+      var(--tap-sys-color-border-negative)
+    );
   }
 
   :host([disabled]) .container {
-    background-color: var(--tap-sys-color-surface-disabled);
+    background-color: var(
+      --tap-text-field-disabled-container-background-color,
+      var(--tap-sys-color-surface-disabled)
+    );
   }
 
   :host([disabled]) .caption,
   :host([disabled]) .label,
   :host([disabled]) .input,
   :host([disabled]) .input::placeholder {
-    color: var(--tap-sys-color-content-disabled);
+    color: var(
+      --tap-text-field-disabled-container-color,
+      var(--tap-sys-color-content-disabled)
+    );
   }
 `;
diff --git a/src/text-field/text-field.ts b/src/text-field/text-field.ts
index 17a45fe0..a1c25530 100644
--- a/src/text-field/text-field.ts
+++ b/src/text-field/text-field.ts
@@ -1,7 +1,7 @@
-import { LitElement, PropertyValues, html, nothing } from "lit";
-import { property } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { live } from "lit/directives/live.js";
+import { LitElement, PropertyValues, html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { live } from 'lit/directives/live.js';
 
 export class TextField extends LitElement {
   static override shadowRootOptions: ShadowRootInit = {
@@ -12,7 +12,7 @@ export class TextField extends LitElement {
   static readonly formAssociated = true;
 
   @property({ type: String })
-  value = "";
+  value = '';
 
   @property({ type: Boolean })
   disabled = false;
@@ -49,7 +49,7 @@ export class TextField extends LitElement {
   }
 
   protected updated(changed: PropertyValues) {
-    if (changed.has("value")) {
+    if (changed.has('value')) {
       this.internals.setFormValue(this.value);
     }
   }
@@ -59,7 +59,7 @@ export class TextField extends LitElement {
   }
 
   formResetCallback() {
-    this.value = "";
+    this.value = '';
   }
 
   private handleInput(event: InputEvent) {
@@ -73,7 +73,7 @@ export class TextField extends LitElement {
         <label part="label" class="label" for="input" ?hidden=${!this.label}
           >${this.label ?? nothing}</label
         >
-        <div  part="container" class="container">
+        <div part="container" class="container">
           <slot name="leading"></slot>
           <input
             id="input"
@@ -82,7 +82,7 @@ export class TextField extends LitElement {
             aria-describedby="caption"
             aria-invalid=${this.error}
             aria-label=${ifDefined(this.label)}
-            aria-disabled=${this.disabled ? "true" : "false"}
+            aria-disabled=${this.disabled ? 'true' : 'false'}
             ?disabled=${this.disabled}
             inputmode=${ifDefined(this.inputmode)}
             placeholder=${ifDefined(this.placeholder)}
@@ -93,7 +93,11 @@ export class TextField extends LitElement {
           />
           <slot name="trailing"></slot>
         </div>
-        <span part="caption" class="caption" id="caption" ?hidden=${!this.caption}
+        <span
+          part="caption"
+          class="caption"
+          id="caption"
+          ?hidden=${!this.caption}
           >${this.caption ?? nothing}</span
         >
       </div>