---
type: "Components"
category: "Form"
parent: "Form"
title: "Content"
date: "2030-10-10"
---

## Variant

Use **Tailwind CSS** to assign variant (e.g. [border-color](https://tailwindcss.com/docs/border-color), [background-color](https://tailwindcss.com/docs/background-color), [text-color](https://tailwindcss.com/docs/text-color)).

<demo>
  <demoinline src="demos/components/form/variant-default">
  </demoinline>
  <demoinline src="demos/components/form/variant-primary">
  </demoinline>
  <demoinline src="demos/components/form/variant-underline">
  </demoinline>
</demo>

## Size

Use **Tailwind CSS** to assign size (e.g. [padding](https://tailwindcss.com/docs/padding), [font-size](https://tailwindcss.com/docs/font-size)).

<demo>
  <demoinline src="demos/components/form/size-xs">
  </demoinline>
  <demoinline src="demos/components/form/size-sm">
  </demoinline>
  <demoinline src="demos/components/form/size-md">
  </demoinline>
</demo>

## Toolbar

Refer to [toolbar](/components/toolbar).
