SelectableText#

사용자가 마우스로 드래그하여 선택하고 복사할 수 있는 텍스트 컴포넌트입니다. Flutter 는 m.SelectableText 로 텍스트 선택을 처리하고, Web 은 select-text 클래스로 user-select: text 동작을 적용합니다. 양쪽 모두 plain text 와 rich text 를 지원합니다.

Live Preview#

class SelectableTextDefaultExample extends StatelessComponent {
  const SelectableTextDefaultExample({super.key});

  @override
  Component build(BuildContext context) {
    return const SelectableText('You can select and copy this text.');
  }
}

class SelectableTextDefaultExample extends StatelessWidget {
  const SelectableTextDefaultExample({super.key});

  @override
  Widget build(BuildContext context) {
    return const SelectableText('You can select and copy this text.');
  }
}

class SelectableTextStyledExample extends StatelessComponent {
  const SelectableTextStyledExample({super.key});

  @override
  Component build(BuildContext context) {
    return const SelectableText(
      'Selectable text with a custom style.',
      selectableTextStyle: CoreSelectableTextStyle(
        textStyle: CoreTextStyle(
          fontSize: CoreFontSize.s18,
          fontWeight: CoreFontWeight.semiBold,
        ),
      ),
    );
  }
}

class SelectableTextStyledExample extends StatelessWidget {
  const SelectableTextStyledExample({super.key});

  @override
  Widget build(BuildContext context) {
    return const SelectableText(
      'Selectable text with a custom style.',
      selectableTextStyle: CoreSelectableTextStyle(
        textStyle: CoreTextStyle(
          fontSize: CoreFontSize.s18,
          fontWeight: CoreFontWeight.semiBold,
        ),
      ),
    );
  }
}

사용 시기 (When to Use)#

이 컴포넌트를 사용하세요:

• 사용자가 본문 텍스트를 복사할 수 있어야 할 때 (코드 토큰, ID, 안내 문구 등)
• Web 의 user-select: none 상속으로 인해 선택이 막히는 영역에서 선택을 보장할 때
• 읽기 전용이지만 복사 가능해야 하는 정보 표시 영역

대신 다른 컴포넌트를 사용하세요:

• Text: 선택 기능이 필요 없는 일반 텍스트 표시
• CodeSnippet: 복사 버튼이 있는 코드 블록
• TextField: 사용자가 편집해야 하는 입력 필드

기본 사용법 (Basic Usage)#

// plain text
const SelectableText('You can select and copy this text.')

// 커스텀 텍스트 스타일
const SelectableText(
  'Selectable text with a custom style.',
  selectableTextStyle: CoreSelectableTextStyle(
    textStyle: CoreTextStyle(
      fontSize: CoreFontSize.s18,
      fontWeight: CoreFontWeight.semiBold,
    ),
  ),
)

// rich text
SelectableText.rich(children: [Text('Selectable content')])

// plain text
const SelectableText('You can select and copy this text.')

// 커스텀 텍스트 스타일
const SelectableText(
  'Selectable text with a custom style.',
  selectableTextStyle: CoreSelectableTextStyle(
    textStyle: CoreTextStyle(
      fontSize: CoreFontSize.s18,
      fontWeight: CoreFontWeight.semiBold,
    ),
  ),
)

// rich text
SelectableText.rich(children: [span([text('Selectable content')])])

Props / Parameters#

스타일 시스템 (Style System)#

모든 텍스트 스타일 / 커서 chrome override 는 selectableTextStyle 슬롯 하나로 흐릅니다.

캐럿의 시각적 렌더링은 Flutter 에만 적용됩니다 — Web 의 비편집 텍스트는 브라우저 기본 캐럿을 사용합니다. 다만 Web resolver 는 파리티 / 툴링을 위해 caret-color 와 --coui-caret-width / --coui-caret-height / --coui-caret-radius 커스텀 프로퍼티로 해소된 캐럿 chrome 을 노출합니다 (text_area / text_field 와 동일).

Resolve chain#

design system default (CoreSelectableTextStyle.defaultX)
  → CoreSelectableTextTheme.style                  // 프로젝트 공통
  → widget.selectableTextStyle                     // 인스턴스별

동작 스펙 (Behavior)#

인터랙션#

• 사용자가 마우스로 드래그하여 텍스트를 선택 / 하이라이트할 수 있습니다.
• enableInteractiveSelection: false 로 선택을 비활성화할 수 있습니다.

레이아웃#

• Flutter 는 m.SelectableText / m.SelectableText.rich 로 렌더, Web 은 <span> + select-text 클래스로 렌더.
• maxLines 가 지정되면 해당 줄 수 이후 클리핑.

토큰#

사용 가이드라인 (Usage Guidelines)#

✅ Do#

복사가 필요한 정보성 텍스트에 사용하세요:

const SelectableText('Order ID: A1B2-C3D4')

❌ Don't#

편집이 필요한 입력 필드 대신 사용하지 마세요. 편집이 필요하면 TextField 를 쓰세요.

// ❌ — 편집 불가
const SelectableText('편집해 주세요')

접근성 (Accessibility)#

• 읽기 전용 텍스트 — 스크린 리더는 콘텐츠를 그대로 읽습니다.
• semanticsLabel 로 보조 기술에 노출되는 라벨을 커스터마이즈할 수 있습니다 (Flutter).

관련 컴포넌트 (Related Components)#

• Text: 선택 기능 없는 일반 텍스트
• CodeSnippet: 복사 버튼이 있는 코드 블록
• Link: 클릭 가능한 텍스트 링크