Input

Komponen input adalah medan input teks yang membolehkan pengguna memasukkan teks.

Penggunaan

Import

import { Input } from "@govtechmy/myds-react/input";

Anatomi

<Input />

Contoh

Saiz

Gunakan prop size untuk menukar saiz input. Saiz lalai adalah small.

Dinonaktifkan

Nonaktifkan input dengan menetapkan prop disabled kepada true.

Keadaan Tidak Terkawal vs Terkawal

Untuk menggunakan input dalam keadaan tidak terkawal, tetapkan prop defaultValue kepada keadaan awal input.

Untuk menggunakan input dalam keadaan terkawal, gunakan prop value dan onChange untuk mengendalikan keadaan secara programatik.

Anda boleh menambah ikon pada medan input dengan menggunakan komponen InputIcon. Ikon boleh diletakkan di sebelah kiri atau kanan medan input. Kedua-dua ikon kiri dan kanan boleh digunakan bersama.

Tambahan Input

Anda boleh menambah tambahan pada medan input dengan menggunakan komponen InputAddon. Tambahan boleh ditambah atau disisipkan pada medan input. Ini berguna untuk melampirkan butang hantar, simbol mata wang atau sebarang kawalan lain pada medan input.