# Component/Control/Checkbox

> Props: component-control-checkbox.props.txt

## Examples


### Checked

```tsx
{
  args: {
    children: 'Label',
    checked: true
  }
}
```

### Checked Disabled

```tsx
{
  args: {
    children: 'Label',
    disabled: true,
    checked: true
  }
}
```

### Default

```tsx
{
  args: {
    children: 'Label'
  }
}
```

### Disabled

```tsx
{
  args: {
    children: 'Label',
    disabled: true
  }
}
```

### Indeterminate Disabled

```tsx
{
  args: {
    children: 'Label',
    disabled: true,
    indeterminate: true
  }
}
```

### Link

```tsx
{
  render: ({
    disabled,
    ...args
  }) => {
    return <div css={css`
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          column-gap: 8px;
        `}>
        <Checkbox css={css`
            width: 100%;
          `} disabled={disabled} {...args}>
          Label Label Label Label Label Label Label Label Label Label Label
        </Checkbox>
        <TextButton disabled={disabled} kind='link' onClick={() => alert('Link Click')}>
          Link
        </TextButton>
      </div>;
  }
}
```

### Size

```tsx
{
  render: () => <Stack direction='column' gap={10}>
      <Checkbox size='large'>Label</Checkbox>
      <Checkbox size='medium'>Label</Checkbox>
      <Checkbox size='small'>Label</Checkbox>
    </Stack>
}
```