title: "Textfield" slug: "/packages/textfield" category: "control" componentNames:

• "Textfield"

Textfield

The Textfield is a type of input field that users can type into.

import Textfield from "@ds-kit/textfield"

Basic Example

<Textfield />

Sizing

You can change the size of the text field to one of three sizes: sm, md, lg. The default size is size="md".

<>
  <Textfield size="sm" my="1rem" />
  <Textfield size="md" my="1rem" />
  <Textfield size="lg" my="1rem" />
</>

Shape

The textfield has rounded borders by default. You can change it to hafe fully round border by using the pill prop.

<Textfield pill />

Type

You can specify the type of textfield via the type prop. The default type is text.

<Textfield type="email" placeholder="[email protected]" />