---
title: "Form controls"
description: "ikas paneline göre boyutlandırılmış ve renklendirilmiş Field, Input, InputGroup, Select, Checkbox, Switch ve Textarea."
---

<Callout type="info" title="Ne zaman kullanılır">
Etiketler, açıklamalar ve hatalar hizalı olsun diye kontrolleri her zaman Field ile sarın.
</Callout>

## Kurulum

```bash
npx shadcn@latest add @ikas/field @ikas/input @ikas/input-group @ikas/select @ikas/checkbox @ikas/switch @ikas/textarea
```

Registry tanımı yoksa önce [Kurulum](https://builders.ikas.com/tr/docs/app-development/ui-kit/installation) adımlarını tamamlayın.

## Örnekler

### Field

Etiket, açıklama ve hata. Field üzerinde data-invalid, kontrol üzerinde aria-invalid ayarlayın.

**Örnek: Field** (`form/field`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/form/field)

```tsx
import { Field, FieldDescription, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"

export default function FormField() {
  return (
    <FieldGroup className="max-w-sm">
      <Field>
        <FieldLabel htmlFor="campaign-name">Kampanya adı</FieldLabel>
        <Input id="campaign-name" defaultValue="Sonbahar indirimi" />
        <FieldDescription>Bu adı yalnızca siz görürsünüz.</FieldDescription>
      </Field>
      <Field data-invalid>
        <FieldLabel htmlFor="discount-code">İndirim kodu</FieldLabel>
        <Input id="discount-code" defaultValue="SONBAHAR 25" aria-invalid />
        <FieldError>Kod yalnızca harf, rakam ve tire içerebilir.</FieldError>
      </Field>
      <Field>
        <FieldLabel htmlFor="note">İç not</FieldLabel>
        <Textarea id="note" placeholder="Yalnızca personel görür" />
      </Field>
    </FieldGroup>
  )
}
```

### Select, checkbox, switch

**Örnek: Select, checkbox, switch** (`form/controls`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/form/controls)

```tsx
import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldContent, FieldDescription, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"

export default function FormControls() {
  return (
    <FieldGroup className="max-w-sm">
      <Field>
        <FieldLabel htmlFor="sync-interval">Eşitleme sıklığı</FieldLabel>
        <Select defaultValue="15">
          <SelectTrigger id="sync-interval" className="w-full">
            <SelectValue />
          </SelectTrigger>
          <SelectContent position="popper">
            <SelectItem value="5">5 dakikada bir</SelectItem>
            <SelectItem value="15">15 dakikada bir</SelectItem>
            <SelectItem value="60">Saatte bir</SelectItem>
          </SelectContent>
        </Select>
      </Field>
      <Field orientation="horizontal">
        <Checkbox id="notify" defaultChecked />
        <FieldContent>
          <FieldLabel htmlFor="notify">Eşitleme başarısız olursa e-posta gönder</FieldLabel>
          <FieldDescription>Mağaza sahibinin adresine gönderilir.</FieldDescription>
        </FieldContent>
      </Field>
      <Field orientation="horizontal">
        <FieldContent>
          <FieldLabel htmlFor="auto-publish">Yeni ürünleri otomatik yayınla</FieldLabel>
        </FieldContent>
        <Switch id="auto-publish" />
      </Field>
    </FieldGroup>
  )
}
```

### Ön ek ve son ek

Para birimi, birimler ve arama ikonları.

**Örnek: Ön ek ve son ek** (`form/input-group`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/form/input-group)

```tsx
import { PercentIcon, SearchIcon } from "lucide-react"

import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from "@/components/ui/input-group"

export default function FormInputGroup() {
  return (
    <FieldGroup className="max-w-sm">
      <Field>
        <FieldLabel htmlFor="price">Fiyat</FieldLabel>
        <InputGroup>
          <InputGroupAddon>
            <InputGroupText>₺</InputGroupText>
          </InputGroupAddon>
          <InputGroupInput id="price" inputMode="decimal" defaultValue="1.249,90" />
        </InputGroup>
      </Field>
      <Field>
        <FieldLabel htmlFor="discount">İndirim</FieldLabel>
        <InputGroup>
          <InputGroupInput id="discount" inputMode="numeric" defaultValue="25" />
          <InputGroupAddon align="inline-end">
            <PercentIcon />
          </InputGroupAddon>
        </InputGroup>
      </Field>
      <Field>
        <FieldLabel htmlFor="search" className="sr-only">
          Siparişlerde ara
        </FieldLabel>
        <InputGroup>
          <InputGroupAddon>
            <SearchIcon />
          </InputGroupAddon>
          <InputGroupInput id="search" placeholder="Siparişlerde ara" />
        </InputGroup>
      </Field>
    </FieldGroup>
  )
}
```