Field

import { Field } from './components/elyri/Field';
import { Input } from './components/elyri/Input';

export function Example() {
  return (
    <Field>
      <Field.Label>项目名称</Field.Label>
      <Input placeholder="elyri-ui" />
      <Field.Description>展示在仓库首页与侧边栏。</Field.Description>
    </Field>
  );
}

import { useState } from 'react';
import { Field } from './components/elyri/Field';
import { Input } from './components/elyri/Input';

export function Example() {
  const [value, setValue] = useState('');
  const invalid = value !== '' && !value.includes('@');

  return (
    <Field invalid={invalid}>
      <Field.Label>邮箱</Field.Label>
      <Input value={value} onChange={(event) => setValue(event.target.value)} placeholder="you@example.com" />
      <Field.Description>我们不会公开你的邮箱。</Field.Description>
      {invalid && <Field.Message>请输入包含 @ 的邮箱地址。</Field.Message>}
    </Field>
  );
}

import { Field } from './components/elyri/Field';
import { RadioGroup } from './components/elyri/Radio';
import { Select } from './components/elyri/Select';
import { Textarea } from './components/elyri/Textarea';

export function Example() {
  return (
    <div>
      <Field required>
        <Field.Label>水果</Field.Label>
        <Select placeholder="Pick one">
          <Select.Trigger />
          <Select.Content>
            <Select.Item value="apple">Apple</Select.Item>
            <Select.Item value="banana">Banana</Select.Item>
          </Select.Content>
        </Select>
      </Field>
      <Field>
        <Field.Label>备注</Field.Label>
        <Textarea placeholder="可选" />
      </Field>
      <Field>
        <Field.Label>尺寸偏好</Field.Label>
        <RadioGroup defaultValue="md">
          <RadioGroup.Radio value="sm">小</RadioGroup.Radio>
          <RadioGroup.Radio value="md">中</RadioGroup.Radio>
        </RadioGroup>
      </Field>
    </div>
  );
}

import { Field } from './components/elyri/Field';
import { Input } from './components/elyri/Input';

export function Example() {
  return (
    <Field disabled>
      <Field.Label>项目名称</Field.Label>
      <Input placeholder="不可编辑" />
      <Field.Description>整域禁用时标签与描述同步变灰。</Field.Description>
    </Field>
  );
}